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

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

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