search

Home >Web Front-end >H5 Tutorial >Take you to understand the 3D effect in css

Take you to understand the 3D effect in css

零下一度
零下一度Original
2017-06-28 10:36:291514browse

---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: 

 <!DOCTYPE html> 2 
 <html> 3 <head> 4     
 <meta charset="UTF-8"> 5     
 <title>ITandYT</title> 6     
 <style type="text/css"> 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 </head>63 <body>64 <div id="box">65     
 <div><img src="010.jpg"/></div>66     <div><img src="010.jpg"/> </div>67     <div><img src="010.jpg"/> </div>68     
 <div><img src="010.jpg"/> </div>69     <div><img src="010.jpg"/> </div>70     <div><img src="010.jpg"/> </div>
 </div>72 73 <script type="text/javascript">74 75     // 获取元素76     
 var oDiv = document.querySelector('#box');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 = 'perspective(800px) rotateY('+y+'deg) rotateX('+x+'deg)'90         }91         
 document.onmouseup = function(){92             
 document.onmousemove = null;93         }94         
 return false;95     }96 97 </script>
 </body> 
  </html>

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!

Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：How should I learn Angular2?Next article：How should I learn Angular2?

Related articles

See more