使用CSS3制作3D动态效果

最新推荐文章于 2024-09-27 17:24:06 发布

原创最新推荐文章于 2024-09-27 17:24:06 发布 · 2.1k 阅读

9 ·

CC 4.0 BY-SA版权

本文详细介绍了如何利用 CSS3 的 transition 和 transform 属性来创建精美的 3D 动画效果，包括过渡效果、3D 场景搭建及实际案例演示。

本篇由3部分组成：

Part I : transition的介绍

Part II ：创建一个3D场景

Part III : 根据以上两个部分创建3D效果

----------------------------------------------------

Part I

CSS3有两个主要的动画效果：

1.transition:

从一个属性值，平滑的过渡到另一个属性值

2.animation

通过关键帧的技术，在网页上产生更加复杂的动画效果。

本章节只讲transition的部分：

一.浏览器的支持

-webkit-transition : 适用于Chrome和Safari

-moz-transition : 使用于Firefox

-o-transition ：使用于Opera

本章节都使用Chrome浏览器进行讲解：

语法：transition:<过渡属性名称><过渡时间><过渡模式><延迟模式>

transition: property duration timing-function delay;

这是一个缩写的形式。

transition 属性是一个简写属性，用于设置四个过渡属性：

transition-property
transition-duration
transition-timing-function
transition-delay

注释：请始终设置 transition-duration 属性，否则时长为 0，就不会产生过渡效果。

举例：

-webkit-transition:background-color 2s;

上面也可以写成如下形式：

-webkit-transition-proper:background-color;
-webkit-transition-duration:2s;

就是背景颜色进行了一个2s的渐变过程。如下所示，由黑色渐变成红色

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Transition</title>

    <style>
        #block{
            width: 400px;
            height: 400px;
            background-color: black;
            margin: auto;

            -webkit-transition:background-color 2s;

        }

        #block:hover{
            background-color: red;
        }
    </style>
</head>
<body>
    <div id ="block">
    </div>
</body>
</html>

其中的过渡模式(transition-timing-function)有五种效果：

•ease 缓慢开始，缓慢结束

•linear 匀速

•ease-in 缓慢开始

•ease-out 缓慢结束

•ease-in-out 缓慢开始，缓慢结束(和ease稍有区别)

示例代码如下：

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style>
        #wrapper{
            width:1024px;
            margin:0 auto;
        }
        .progress-bar{
            height:40px;
            width:40px;
            background-color: #69c;
        }
        .progress-bar:hover{
            width:960px;
        }

        #bar1{
            -webkit-transition: width 5s linear;
        }
        #bar2{
            -webkit-transition: width 5s ease;
        }
        #bar3{
            -webkit-transition: width 5s ease-in;
        }
        #bar4{
            -webkit-transition: width 5s ease-out;
        }
        #bar5{
            -webkit-transition: width 5s ease-in-out;
        }
    </style>
</head>
<body>

    <div id="wrapper">
        <p>linear</p>
        <div class="progress-bar" id="bar1"></div>

        <p>ease</p>
        <div class="progress-bar" id="bar2"></div>

        <p>ease-in</p>
        <div class="progress-bar" id="bar3"></div>

        <p>ease-out</p>
        <div class="progress-bar" id="bar4"></div>

        <p>ease-in-out</p>
        <div class="progress-bar" id="bar5"></div>
    </div>
</body>
</html>

把鼠标放在各自的div里会产生各种效果。

目前的transition都只是对单一的属性进行操作，其实可以同时进行操作，语法如下：

方法一：(要用逗号分隔开)

-webkit-transition:<属性1><时间1> ,  <属性2><时间2> ,….;

方法二：

-webkit-transition:<属性1><时间1>;
-webkit-transition: <属性2><时间2> ;

目前为止，Transition的介绍已经完毕。

-------------------------------------------------------------------------------

Part II

第二部分介绍：如何创建一个3D场景。

可能很多人会问为何要创建一个3D场景。

这是因为对于浏览器来说，本身就是一个平面，我们去观看里面的物体就是一个2D的效果。

而对于3D来说，是在2D的基础上再增加一个维度，也就是深度。

这时，浏览器可能就不是一个页面了，它变成了一个窗口。

我们在外面需要通过哪个视角去观察这个窗口，以及窗口里面的物体距离窗口距离的大小。

所以需要设置两个属性值：

-webkit-perspective:800px;
-webkit-perspective-origin:50% 50%;

如下图所示：

但是当我们把场景设置好，如果物体不进行其他的操作，看起来的效果还是跟2D没有任何区别。

所以需要transform属性来进行操作：

-translate（位移操作）

•translateX(x px) 向右为正方向

•translateY(y px) 向下为正反向

•translateZ(z px) 由里冲向屏幕为正方向

-rotate

•rotateX(x deg) 沿着x轴进行旋转

•rotateY(y deg) 沿着y轴进行旋转

•rotateZ(z deg) 沿着z轴进行旋转

下面两个demo分别展示了translate操作和rotate操作:

1.自定义位移操作

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style>
        #experiment{
            -webkit-perspective: 800;
            -webkit-perspective-origin: 50% 50%;

            -webkit-transition: -webkit-transform 1s linear;
            -webkit-transform-style:-webkit-preserve-3d;
        }
        #block{
            width:150px;
            height:150px;
            background-color: #69c;
            margin:170px auto;

        }
        #op{
            margin:0 auto;
            font-size:16px;
            font-weight:bold;
            width:800px;
        }
        #op .range-control{width:721px;}
    </style>

    <script type="text/javascript">
        function translateall(){
            var x = document.getElementById("translatex").value;
            var y = document.getElementById("translatey").value;
            var z = document.getElementById("translatez").value;

            document.getElementById('block').style.webkitTransform = "translateX("+x+"px) translateY("+y+"px) translateZ("+z+"px)";

            document.getElementById('translatex-span').innerText = x;
            document.getElementById('translatey-span').innerText = y;
            document.getElementById('translatez-span').innerText = z;
        }
    </script>
</head>
<body>
<div id="experiment">
    <div id="block">
    </div>
</div>
<div id="op">
    <p>translate x: <span id="translatex-span">0</span> px</p>
    <input type="range" min="-360" max="360" id="translatex" value="0" class="range-control" onmousemove="translateall()" /><br/>
    <p>translate y: <span id="translatey-span">0</span> px</p>
    <input type="range" min="-360" max="360" id="translatey" value="0" class="range-control" onmousemove="translateall()" /><br/>
    <p>translate z: <span id="translatez-span">0</span> px</p>
    <input type="range" min="-360" max="360" id="translatez" value="0" class="range-control" onmousemove="translateall()" /><br/>
</div>
</body>
</html>

2.自定义选择操作：

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style>
        #experiment{
            -webkit-perspective: 800;
            -webkit-perspective-origin: 50% 50%;

            -webkit-transition: -webkit-transform 1s linear;
            -webkit-transform-style:-webkit-preserve-3d;
        }
        #block{
            width:150px;
            height:150px;
            background-color: #69c;
            margin:170px auto;

        }
        #op{
            margin:0 auto;
            font-size:16px;
            font-weight:bold;
            width:800px;
        }
        #op .range-control{width:721px;}
    </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('block').style.webkitTransform = "rotateX("+x+"deg) rotateY("+y+"deg) rotateZ("+z+"deg)";

            document.getElementById('degx-span').innerText = x;
            document.getElementById('degy-span').innerText = y;
            document.getElementById('degz-span').innerText = z;
        }
    </script>
</head>
<body>
    <div id="experiment">
        <div id="block">
        </div>
    </div>
    <div id="op">
        <p>rotate x: <span id="degx-span">0</span> deg</p>
        <input type="range" min="-360" max="360" id="rotatex" value="0" class="range-control" onmousemove="rotate()" /><br/>
        <p>rotate y: <span id="degy-span">0</span> deg</p>
        <input type="range" min="-360" max="360" id="rotatey" value="0" class="range-control" onmousemove="rotate()" /><br/>
        <p>rotate z: <span id="degz-span">0</span> deg</p>
        <input type="range" min="-360" max="360" id="rotatez" value="0" class="range-control" onmousemove="rotate()" /><br/>
    </div>
</body>
</html>

自此，第二部分讲完。

----------------------------------------------------

Part III

创建3D动画效果

接下来用使用以上技能来进行3D动画效果的制作：

使用transition的动画效果 + transform的位移选择操作

再定义一个3D场景即可：（需要使用javascript，但是不难）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        #my3dspace{
            -webkit-perspective: 800px;
            -webkit-perspective-origin: 50% 50%;

            overflow: hidden;
        }

        #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{
            -webkit-transform-origin:bottom ;
            -webkit-transition:-webkit-transform 1s linear;
        }
        #page2,#page3,#page4,#page5,#page6{
            -webkit-transform-origin:bottom ;
            -webkit-transition:-webkit-transform 1s linear;
            -webkit-transform:rotateX(90deg);
        }

        #op{
            text-align:center;
            margin: 40px auto;
        }
    </style>

    <script type="text/javascript">

        var curIndex = 1;

        function next(){
            if( curIndex == 6 ){
                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 pre(){
            if(curIndex == 1){
                return ;
            }
            var curPage = document.getElementById("page" + curIndex);
            curPage.style.webkitTransform = "rotateX(90deg)";

            curIndex -- ;

            var curPage = document.getElementById("page" + curIndex);
            curPage.style.webkitTransform = "rotateX(0deg)";

        }
    </script>
</head>
<body>
    <div id ="my3dspace">
        <div id = "pagegroup">
            <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 ="op">
        <a href ="javascript:next()">next</a>  
        <a href ="javascript:pre()">pre</a>
    </div>

</body>
</html>