使用CSS3制作3D动态效果

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/Hubbert01/article/details/78897555

本篇由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" οnmοusemοve="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" οnmοusemοve="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" οnmοusemοve="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" οnmοusemοve="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" οnmοusemοve="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" οnmοusemοve="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>













展开阅读全文

没有更多推荐了,返回首页