Aujourd'hui, nous allons parler de l'effet 3D en CSS

Si vous maîtrisez vraiment la transformation et êtes compétent, vous pouvez créer. de nombreux effets sympas directement via CSS. Même les images et les onglets de carrousel peuvent être créés via CSS. Demain, nous parlerons de la façon d'utiliser CSS pour créer des images de carrousel

Très bien, sans plus tarder. Le « code » de Cuihua :

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

Copier après la connexion

Si l'image n'est pas disponible, remplacez-la simplement par une autre !

N'est-ce pas très simple, n'est-ce pas ? je l'ai appris ??? Ce n'est pas grave si vous ne l'avez pas fait, copiez-le simplement !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!