今天咱们来说一下,CSS中的3D效果

.如果你把transform真的掌握的和纯熟的话,就可以直接通过CSS做出很多很炫酷的效果,甚至.轮播图和选项卡都可以通过CSS来做,咱们明天就说如何运用CSS来做轮播图,大家记得看哦!

很好,话不多说,翠花'上代码':

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

图片没有的话就其他的代替哦!

是不是很简单,你学会了吗???没学会也不要紧,直接把本上神的复制走吧!绝对能用哦!

以上就是带你了解css中的3D效果的详细内容，更多请关注其它相关文章！

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！