3d shot started

index.html

@@ -201,6 +201,50 @@ h2[data-spy='true']
         <a href="#email">Sign-up</a>
     </nav>
     <section id="order">
+
+        <style>
+            .shot3d
+            {
+                position: relative;
+                height: 350px;
+                width: 350px;
+                margin-left: 60px;
+                border: 1px solid blue;
+                perspective: 400px;
+                perspective-origin: 50% 50%;  
+            }
+            
+            .shot3d img
+            {
+                position:relative;
+                width:100%;
+                height:auto;
+                transform-style: preserve-3d;
+                transform: rotateX(-15deg);
+            }
+
+            .shot3d::before
+            {
+                position:absolute;
+                content:" ";
+                top:100%;
+                left:0%;
+                width:100%;
+                height:100px;
+                background:red;
+                transform-style: preserve-3d;
+                transform-origin: top center;
+                transform: rotateX(90deg) translateY(-50px);
+            }
+
+
+        </style>
+
+        <div class="shot3d">
+            <img src="https://truthforlife.org/static/images/productimage-picture-encore-2021-9729.jpg"/>
+        </div>
+
+
         <h2 data-spy="0.2|0.8">Order</h2>
         <h3>Truth For Life</h3>
         <h4>365 Daily Devotionals</h4>