CSS3 实现3D特效

CSS3 中的动画效果

transition
animate

transition主要是从一个属性平滑过渡到另一个属性，而animate则是结合关键帧技术，实现更加复杂的动画效果；

transion:过渡属性名称过渡时间

谷歌、opera、火狐、苹果浏览器不支持，注意兼容性

-webkit-transition: color 1s;

实例：我们在让背景颜色做一个改变

   <style>
       #block{
           width:400px;
           height:400px;
           background-color: blue;
           margin:0 auto;
       }
       #block:hover{
           background-color: red;
       }
   </style>
</head>
<body>
    <div id="block">
    </div>
</body>

鼠标悬停上去之后，块状元素的背景颜色立即由蓝色变成红色，如果要实现平滑过渡，只需要在#block上添加一个过去属性-webkit-transition: background-color 3s;，如何添加在#block:hover上，那么就会hover的时候有3s的过渡，失去焦点后，立马变成blue，没有过渡效果；

上面其实是两个属性写在一起，分开写是这样的：;

   transition-property：color
   transition-duration:1s;

那么如何设置多个属性的过渡效果呢？

   <style>
       #block{
           width:400px;
           height:400px;
           background-color: blue;
           margin:0 auto;
           -webkit-transition: background-color 3s linear , height 2s linear;
       }
       #block:hover{
           background-color: red;
           height:600px;
       }
   </style>
</head>
<body>
    <div id="block">
    </div>
</body>

translateX是从屏幕左边到右边；translateY是从上边到下边；translateZ是从屏幕外到里边；外为负数，越大，里为正数，表示越远；rotateX和rotateY都是分别沿着x轴中心与y轴中心逆时针为正，rotateZ是沿着顺时针为正；

使用CSS3创建简单的3d场景

这里写图片描述

   perspective: 500px;//3D物体距屏幕的距离

   perspective-origin: 10% 10%;//3D元素基点基于X,Y轴的位置

   transform:rotate(45deg);//2D/3D转换，旋转，缩放，移动或倾斜

简单的3d场景设置

<style>
        #experiment{
            -webkit-perspective: 800; //视距深度
            -webkit-perspective-origin: 50% 50%; //视距中心
            -webkit-transform-style:-webkit-preserve-3d;//3d场景
        }
        #block{
            width:500px;
            height:500px;
            background-color: #69c;
            margin:100px auto;

            -webkit-transform:rotateZ(45deg);
        }
    </style>
</head>
<body>
    <div id="experiment">
        <div id="block">
        </div>
    </div>
</body>


![](http://i.imgur.com/ZFi5nP0.gif)

### 综合实例：

   <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>3d场景演示</title>
    <style>
        #space3d{
            -webkit-perspective: 800;
            -webkit-perspective-origin: 50% 50%;

            overflow:hidden;
        }
        #container{
            height: 400px;
            width: 400px;

            position: relative;
            margin: 0px auto;
            -webkit-transform-style:preserve-3d;
        }

        .page{
            height: 360px;
            width:360px;
            padding: 20px;

            position: absolute;

            background-color: #000;

            color: #FFF;
            font-weight: bold;
            font-size: 360px;
            text-align: center;/* 垂直居中 */
            line-height: 360px;/* 水平居中 */

            -webkit-transform-origin:bottom;
            -webkit-transition: -webkit-transform 1s linear;
        }

        #page2,#page3,#page4,#page5,#page6{
            -webkit-transform: rotateX(90deg);
        }

        #btnoption{
            margin: 40px auto;
            text-align: center;/* ... */
        }
    </style>
</head>
<body>
    <div id="space3d">
        <div id="container">
            <div class="page" id = "page1">1</div>
            <div class="page" id = "page2">2</div>
            <div class="page" id = "page3">3</div>
            <div class="page" id = "page4">4</div>
            <div class="page" id = "page5">5</div>
            <div class="page" id = "page6">6</div>
        </div>

    </div>

    <div id="btnoption">
        <button id="next" value="next" onclick="next()">next</button>
        <button id="prev" value="previous" onclick="prev()">prev</button>
    </div>

    <script>
        var currentIndex = 1;
        function next(){
            if(currentIndex == 6){
                return;
            }
            var currntPage = document.getElementById('page' + currentIndex);
            currntPage.style.webkitTransform = "rotateX(-90deg)";
            var nextPage = document.getElementById('page' + ++ currentIndex);
            nextPage.style.webkitTransform = 'rotateX(0deg)';
        }

        function prev(){
            if(currentIndex == 1){
                return;
            }
            var currntPage = document.getElementById('page' + currentIndex);
            currntPage.style.webkitTransform = "rotateX(90deg)";
            var prevPage = document.getElementById('page' + -- currentIndex);
            prevPage.style.webkitTransform = 'rotateX(0deg)';
        }
    </script>
</body>

转载自：http://blog.csdn.net/i10630226/article/details/53994827

CSS3 中的动画效果

实例：我们在让背景颜色做一个改变

简单的3d场景设置

猜你喜欢