CSS3 3D效果 实现一个可旋转的正方体


前提知识:

1.Transition(过渡)(W3C文档http://www.w3.org/TR/css3-transitions/

  属性:

  • transition-property 要应用过渡的css属性
  • transition-duration 过渡发生的时长
  • transition-timing-function 过渡过程速度变化的设置

可设置值:

linear(匀速)ease(缓慢开始,缓慢结束。默认) ease-in(缓慢开始) ease-out(缓慢结束) ease-in-out(缓慢开始,缓慢结束,但与ease速度不同)

  • transition-delay 过渡何时开始
  • transition 以上属性简写

  使用:

  不同浏览器需要在属性前加前缀:chrome、Safari 需要加 -webkit-,Firefox前缀-moz-,IE前缀-ms-,Opera前缀-o-

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style>
        #block{
            width:400px;
            height:400px;
            background-color: #69c;
            margin:0 auto;
            -webkit-transition: background-color 3s;
        }
        #block:hover{
            background-color: red;;
        }
    </style>
</head>
<body>
    <div id="block">
    </div>
</body>
</html>

 

2.Transform(转换)(W3C文档http://www.w3.org/TR/css3-3d-transforms/

  属性:

  perspective:建立3D场景,实现透视效果,值为物品与屏幕距离

  perspective-origin:子元素在视图中的位置,X和Y值表示(注意:perspective和perspective-origin都要在实现3D效果元素的父元素中设置)

  transform-style:规定如何在 3D 空间中呈现被嵌套的元素(可设置为flat或preserve-3d)

  transform-origin:旋转中心

    X轴可设置为:left | center | right

    Y轴可设置为:top | center | bottom

    Z轴设置在Z轴上的位置:length px

Demonstration of the initial coordinate space

  本例中用到的方法有translateX(px),translateY,translateZ,表示在XYZ轴上移动和rotateX(deg),rotateY,rotateZ绕XYZ轴旋转。

一个类似日历的实现:

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style type="text/css">
        #experiment{
            -webkit-perspective:800;
            -webkit-perspective-origin:50% 50%;
            
            overflow: hidden; /*不能写在#pagegroup,否则page显示为2D效果*/
        }
        #pagegroup{
            width: 400px;
            height: 400px;
            margin: 0 auto;
            -webkit-transform-style:preserve-3d;
            position: relative;
        }
        .page{
            width: 360px;
            height: 360px;
            padding: 20px;
            background-color: black;
            color: white;
            font-weight: bold;
            font-size: 360px;
            line-height: 360px;
            text-align: center; 

            position: absolute;
        }
        #page1,#page2,#page3,#page4,#page5{
            -webkit-transform-origin:top;
            -webkit-transition:-webkit-transform 1s linear;
        }
        #op{
            text-align: center;
            margin: 40px auto;
        }
    </style>
    <script type="text/javascript">
        
        var curIndex = 1;//当前页
        
        function next(){
            if (curIndex==5)
                return;
            var curPage = document.getElementById("page"+curIndex);
            curPage.style.webkitTransform="rotateX(90deg)";
            curIndex++;
            var nextPage = document.getElementById("page"+curIndex);
            nextPage.style.webkitTransform="rotateX(0deg)";//值表示旋转到什么位置,而不是旋转多少度
        }
        function prev(){
            if (curIndex==1) 
                return;                

            curIndex--;
            var prevPage = document.getElementById("page"+curIndex);
            prevPage.style.webkitTransform="rotateX(0deg)";
        }
    </script>
</head>
<body>
    <div id="experiment">
        <div id="pagegroup">
             <div class="page" id="page5">5</div>
            <div class="page" id="page4">4</div>
            <div class="page" id="page3">3</div>
            <div class="page" id="page2">2</div>
            <div class="page" id="page1">1</div>
        </div>
    </div>
    <div id="op">
            <a href="javascript:next()">next</a>&nbsp
            <a href="javascript:prev()">previous</a>
        </div>
</body>
</html>

完成上一个例子后,类似的可以完成一个可调节旋转角度的正方体。正方体的样式通过设置transform-origin和rotate的值实现。

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <title>myCube</title>
 5     <style type="text/css">
 6     
 7         #myCube{
 8             -webkit-perspective:800;
 9             -webkit-perspective-origin:50% 50%;            
10         }
11         #cube{
12             width: 200px;
13             height: 200px;
14             margin: 100px auto;
15             position: relative;
16 
17             -webkit-transform-style:preserve-3d;
18         }
19         .face{
20             position: absolute;
21             width: 160px;
22             height: 160px;
23             padding: 20px;
24             background-color: black;
25 
26             color: white;
27             font-weight: bold;
28             font-size: 160px;
29             line-height: 160px;
30             text-align: center;
31 
32             -webkit-transition:-webkit-transform 1s linear;
33         }
34         #face1{
35         }
36         #face2{
37             -webkit-transform-origin:right;
38             -webkit-transform:rotateY(-90deg);
39         }
40         #face3{
41             -webkit-transform-origin:left;
42             -webkit-transform:rotateY(90deg);
43         }
44         #face4{
45             -webkit-transform-origin:top;
46             -webkit-transform:rotateX(-90deg);
47         }
48         #face5{
49             -webkit-transform-origin:bottom;
50             -webkit-transform:rotateX(90deg);
51         }
52         #face6{
53             -webkit-transform:translateZ(-160px);
54         }
55         #op{
56             margin: 0 auto;
57             width: 800px;
58             font-weight: bold;
59             font-size: 16px;
60         }
61         #op .range-control{width: 720px;}
62     </style>
63     <script type="text/javascript">
64         function rotate(){
65             var x = document.getElementById("rotatex").value;
66             var y = document.getElementById("rotatey").value;
67             var z = document.getElementById("rotatez").value;
68 
69             document.getElementById("cube").style.webkitTransform = "rotateX("+x+"deg) rotateY("+y+"deg) rotateZ("+z+"deg)";
70             document.getElementById("degx").innerText = x;
71             document.getElementById("degy").innerText = y;
72             document.getElementById("degz").innerText = z;
73         }
74     </script>
75 </head>
76 <body>
77     <div id="myCube">
78         <div id="cube">
79             <div class="face" id="face1">1</div>
80         <div class="face" id="face2">2</div>
81         <div class="face" id="face3">3</div>
82         <div class="face" id="face4">4</div>
83         <div class="face" id="face5">5</div>
84         <div class="face" id="face6">6</div>
85         </div>
86     </div>
87     <div id="op">
88         <p>rotateX:<span id="degx">0</span>deg</p>
89         <input type="range" id="rotatex" min=-360 max=360 value="0" class="range-control" onchange="rotate()" /></br>
90         <p>rotateY:<span id="degy">0</span>deg</p>
91         <input type="range" id="rotatey" min=-360 max=360 value="0" class="range-control" onchange="rotate()" /></br>
92         <p>rotateZ:<span id="degz">0</span>deg</p>
93         <input type="range" id="rotatez" min=-360 max=360 value="0" class="range-control" onchange="rotate()" /></br>
94     </div>
95 </body>
96 </html>

参考教程:http://www.imooc.com/learn/77

 

打赏

免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2022 CODEPRJ.COM