Take you to understand the 3D effect in css

---Start restoring content---

Today we will talk about the 3D effect in CSS

. If you really master the transform and are proficient, you can Many cool effects can be created directly through CSS. Even carousel images and tabs can be created through CSS. Tomorrow we will talk about how to use CSS to create carousel images. Remember to read it!

Very good, not much to say, Cuihua's code is:

 nbsp;html> 2 
  3  4     
 <meta> 5     
 <title>ITandYT</title> 6     
 <style> 7         
 #box{ 8             width: 200px; 9             
 height: 200px;10             margin: 200px auto;11             
 position: relative;12 13             /*给父级设置3d空间*/14             
 transform-style: preserve-3d;15             /*设置景深*/16             
 /*perspective: 800px;*/17             
 transform: perspective(8000px) rotateY(-60deg) rotateX(30deg);18         }         
 #box div{21             width: 100%;22             height: 100%;23             
 border: 1px solid black;24             position: absolute;25             
 pacity: 0.7;26         }27         /*前面*/28         
 #box div:nth-child(1){29             background: palegreen;30             
 transform: translateZ(100px);31         }32         /*后面*/33         
 #box div:nth-child(2){34             background: palevioletred;35             
 transform: translateZ(-100px);36         }37         /*左面*/38         
 #box div:nth-child(3){39             background: plum;40            
 transform: translateX(-100px) rotateY(90deg);41         }42         /*右面*/43         
 #box div:nth-child(4){44             background: peru;45             
 transform: translateX(100px) rotateY(90deg);46         }47         /*上面*/48         
 #box div:nth-child(5){49             background: palegoldenrod;50             
 transform: translateY(-100px) rotateX(90deg);51         }52         /*下面*/53         
 #box div:nth-child(6){54             background: paleturquoise;55             
 transform: translateY(100px) rotateX(90deg);56         }57         img{58             
 width:200px;59             height: 100%;60         }61     </style>62 63 64 <div>65     
 <div><img  src="/static/imghwm/default1.png" data-src="010.jpg" class="lazy" alt="Take you to understand the 3D effect in css" ></div>66     <div>
<img  src="/static/imghwm/default1.png" data-src="010.jpg" class="lazy" alt="Take you to understand the 3D effect in css" > </div>67     <div>
<img  src="/static/imghwm/default1.png" data-src="010.jpg" class="lazy" alt="Take you to understand the 3D effect in css" > </div>68     
 <div>
<img  src="/static/imghwm/default1.png" data-src="010.jpg" class="lazy" alt="Take you to understand the 3D effect in css" > </div>69     <div>
<img  src="/static/imghwm/default1.png" data-src="010.jpg" class="lazy" alt="Take you to understand the 3D effect in css" > </div>70     <div>
<img  src="/static/imghwm/default1.png" data-src="010.jpg" class="lazy" alt="Take you to understand the 3D effect in css" > </div>
 </div>72 73 <script>74 75     // 获取元素76     
 var oDiv = document.querySelector(&#39;#box&#39;);77     var x = 30;78     
 var y = -60;79     oDiv.onmousedown = function(ev){80         
 var event = window.event || ev;81         
 var disY = event.clientX - y;82         
 var disX = event.clientY - x;83 84         
 document.onmousemove = function(ev){85             
 var event = window.event || ev;86             
 // 计算偏移角度87             x = event.clientY - disX;88             
 y = event.clientX - disY;89             
 oDiv.style.transform = &#39;perspective(800px) rotateY(&#39;+y+&#39;deg) rotateX(&#39;+x+&#39;deg)&#39;90         }91         
 document.onmouseup = function(){92             
 document.onmousemove = null;93         }94         
 return false;95     }96 97 </script>
  
  

If the picture is not available, please use other substitutes!

Isn't it very simple? Have you learned it? It doesn’t matter if you haven’t learned it yet. Just copy it! It will definitely work!

The above is the detailed content of Take you to understand the 3D effect in css. For more information, please follow other related articles on the PHP Chinese website!