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

　　本例中用到的方法有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的值实现。

<!DOCTYPE html>
<html>
<head>
    <title>myCube</title>
    <style type="text/css">
    
        #myCube{
            -webkit-perspective:800;
            -webkit-perspective-origin:50% 50%;            
        }
        #cube{
            width: 200px;
            height: 200px;
            margin: 100px auto;
            position: relative;

            -webkit-transform-style:preserve-3d;
        }
        .face{
            position: absolute;
            width: 160px;
            height: 160px;
            padding: 20px;
            background-color: black;

            color: white;
            font-weight: bold;
            font-size: 160px;
            line-height: 160px;
            text-align: center;

            -webkit-transition:-webkit-transform 1s linear;
        }
        #face1{
        }
        #face2{
            -webkit-transform-origin:right;
            -webkit-transform:rotateY(-90deg);
        }
        #face3{
            -webkit-transform-origin:left;
            -webkit-transform:rotateY(90deg);
        }
        #face4{
            -webkit-transform-origin:top;
            -webkit-transform:rotateX(-90deg);
        }
        #face5{
            -webkit-transform-origin:bottom;
            -webkit-transform:rotateX(90deg);
        }
        #face6{
            -webkit-transform:translateZ(-160px);
        }
        #op{
            margin: 0 auto;
            width: 800px;
            font-weight: bold;
            font-size: 16px;
        }
        #op .range-control{width: 720px;}
    </style>
    <script type="text/javascript">
        function rotate(){
            var x = document.getElementById("rotatex").value;
            var y = document.getElementById("rotatey").value;
            var z = document.getElementById("rotatez").value;

            document.getElementById("cube").style.webkitTransform = "rotateX("+x+"deg) rotateY("+y+"deg) rotateZ("+z+"deg)";
            document.getElementById("degx").innerText = x;
            document.getElementById("degy").innerText = y;
            document.getElementById("degz").innerText = z;
        }
    </script>
</head>
<body>
    <div id="myCube">
        <div id="cube">
            <div class="face" id="face1">1</div>
        <div class="face" id="face2">2</div>
        <div class="face" id="face3">3</div>
        <div class="face" id="face4">4</div>
        <div class="face" id="face5">5</div>
        <div class="face" id="face6">6</div>
        </div>
    </div>
    <div id="op">
        <p>rotateX:<span id="degx">0</span>deg</p>
        <input type="range" id="rotatex" min=-360 max=360 value="0" class="range-control" onchange="rotate()" /></br>
        <p>rotateY:<span id="degy">0</span>deg</p>
        <input type="range" id="rotatey" min=-360 max=360 value="0" class="range-control" onchange="rotate()" /></br>
        <p>rotateZ:<span id="degz">0</span>deg</p>
        <input type="range" id="rotatez" min=-360 max=360 value="0" class="range-control" onchange="rotate()" /></br>
    </div>
</body>
</html>

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