首頁 > 文章 > web前端 > 如何制作css3的3d动画--以骰子旋转为例，详解css3动画属性_html/css_WEB-ITnose

如何制作css3的3d动画--以骰子旋转为例，详解css3动画属性_html/css_WEB-ITnose

WBOY原創: 2016-06-24 11:16:351627瀏覽

首先先来看两个用css3实现的炫酷的3d动画效果

你没看错，这个炫酷的效果都是用css3实现的。

下面是动画实现所需要用到的几个css3属性。

1、perspective：用来实现一个3d的场景

写3D效果的第一步是要创建一个3D场景，即索要实现效果的模块。这里用到了 perspective 属性和 perspective-origin 属性。

perspective：用来定义3d动画距离浏览器的距离，单位是（px）。

perspective-origin：效果渲染的视角，告诉浏览器我们观看的角度，一般为 center 或 50% 50%，意为居中。

transform-style：preserve-3d 来告诉浏览器之后要进行的transform的操作都是对一个3D的世界进行的。

2、transition：用来写动画的过度效果

transition 用来实现过度的效果，使动画不至于太过生硬。这是一个复合属性，分别有以下几个属性：

transition-property：过度或动态模拟的css属性，对应的属性有：宽度（width）、高度（height）、边框（border）、绝对定位的上下左右值、外边距（margin）、内边距（padding）、文字阴影（text-shadow）、z-index等。

transition-duration：完成过度所需的时间

transition-timing-function：指定过度函数，函数包括 ease（默认值，速度由快到慢，主见变慢）、linear（匀速）、ease-in（速度越来越快，加速，渐显效果）、ease-out（速度越来越慢，减速，渐隐效果）、ease-in-out（先加速，再减速，渐显渐隐效果）

transition-delay：指定开始出现的延迟时间，即过渡效果开始执行的时间。

3、transform：用来实现翻转、角度的转换

transform 同样是个复合属性，用来实现各种转换效果，分别有以下几个属性：

translate(x,y) 定义 2D 转换。

translate3d(x,y,z) 定义 3D 转换。

translateX/Y/Z 定义转换，分贝用 X、Y、Z 轴的值。

scale(x,y) 定义 2D 缩放转换。

scale3d(x,y,z) 定义 3D 缩放转换。

scaleX/Y/Z 通过设置 X、Y、Z 轴的值来定义缩放转换，若为Z轴，则定义的是3D旋转。

rotate(angle) 定义 2D 旋转，在参数中规定角度。

rotate3d(x,y,z,angle) 定义 3D 旋转。

skew(x-angle,y-angle) 定义沿着 X 和 Y 轴的 2D 倾斜转换。

skewX/Y 定义沿着 X、Y 轴的 2D 倾斜转换。

perspective(n) 为 3D 转换元素定义透视视图

下面介绍下一个简单的骰子的写法

1、创建一个3D场景

这里使用了perspective 和perspective-origin 两个属性，定义了3D动画的距离是800px，居中显示的。这里借用一张慕课网的图片，来查看这两个属性的确切含义。

我们在3D场景里面定义了一个类名为dice的div，这里是我们写这个骰子的外层包裹的div，我们给他定义好宽和高，并让他居中显示。

骰子的六个面我们分别用六个div（其他块级元素也可以）来实现，会用到定位，我们这里给.dice 定义为相对定位。

我们给我们这个骰子的包裹div，加上了transform-style: preserve-3d这个样式，是要告诉浏览器之后要进行的transform的操作都是对一个3D的世界进行的。

<!DOCTYPE html><html><head>    <meta charset="UTF-8" />    <title>实现一个3D骰子</title>    <style>    *{        padding: 0;        margin: 0;            }    .block{        border: 1px solid #000;         padding: 100px 0;        -webkit-perspective: 800px;           -moz-perspective: 800px;                perspective: 800px;        -webkit-perspective-orign: 50% 50%;           -moz-perspective-orign: 50% 50%;                perspective-orign: 50% 50%;    }    .dice{        width: 300px;        height: 300px;        margin: 20px auto;        position: relative;        -webkit-transform-style: preserve-3d;           -moz-transform-style: preserve-3d;                transform-style: preserve-3d;    }    <style></head><body>    <div class="block">        <div class="dice">        </div>    </div></body></html>

2、场景布置好了，下面来写骰子的六个面

html 为6个相同的div

<div class="block">    <div class="dice">        <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>

定义公共的样式

.page{    width: 200px;    height: 200px;    background: rgba(0,0,0,0.3);    position: absolute;    font-size: 200px;    color: #fff;    line-height: 200px;    text-align: center;    border: 1px solid red;}

这时我们看到的是一个6个div重叠的块，如下图；

下面是关键的一步，我们来给每个面定义不同的位置，实现一个正方体的结构。

3、给骰子的六个面定义位置

#page2{        -webkit-transform: rotateY(-90deg);           -moz-transform: rotateY(-90deg);            -ms-transform: rotateY(-90deg);             -o-transform: rotateY(-90deg);                transform: rotateY(-90deg);        -webkit-transform-origin: right;           -moz-transform-origin: right;            -ms-transform-origin: right;             -o-transform-origin: right;                transform-origin: right;    }    #page3{        -webkit-transform: translateZ(-200px);           -moz-transform: translateZ(-200px);            -ms-transform: translateZ(-200px);             -o-transform: translateZ(-200px);                transform: translateZ(-200px);        -webkit-transform-origin: right;           -moz-transform-origin: right;            -ms-transform-origin: right;             -o-transform-origin: right;    }    #page4{        -webkit-transform: rotateY(90deg);           -moz-transform: rotateY(90deg);            -ms-transform: rotateY(90deg);             -o-transform: rotateY(90deg);                transform: rotateY(90deg);        -webkit-transform-origin: left;           -moz-transform-origin: left;            -ms-transform-origin: left;             -o-transform-origin: left;    }    #page5{        -webkit-transform: rotateX(-90deg);           -moz-transform: rotateX(-90deg);            -ms-transform: rotateX(-90deg);             -o-transform: rotateX(-90deg);                transform: rotateX(-90deg);        -webkit-transform-origin: top;           -moz-transform-origin: top;            -ms-transform-origin: top;             -o-transform-origin: top;    }    #page6{        -webkit-transform: rotateX(90deg);           -moz-transform: rotateX(90deg);            -ms-transform: rotateX(90deg);             -o-transform: rotateX(90deg);                transform: rotateX(90deg);        -webkit-transform-origin: bottom;           -moz-transform-origin: bottom;            -ms-transform-origin: bottom;             -o-transform-origin: bottom;           }

这里用到了transform的两个属性 rotate 和 origin，前者是定义旋转角度，后者是定义旋转的轴。

按照上述代码来写，我们现在已经可以看见一个正方体了，如图：

现在已经实现了一大部分代码的书写了，我们已经写出了一个静态的正方体，接下来让他实现一个转起来的动画就可以了。

下面是动画的部分，实现让这个正方体以随机的角度转动起来。　

用css3来书写动画

css3里面另一强大的属性就是动画的实现，省去了很多的js代码的计算一级各种动画效果的考虑，拥有css3神器，就可以写出各种炫酷的效果来，赶紧来看看怎么实现。

1、如何旋转

上面我们讲过了他过transform的rotate属性来实现旋转，我们通过对每个面的旋转实现了一个正方体的样子，这里我们把正方体作为一个整体，来实现一整个正方体的旋转。

2、定义动画：

css3 里面写动画分为两步，第一步就是来定义一个动画。通过 @keyframes 来实现。

语法如下：

@keyframes animationname {keyframes-selector {css-styles;}}

animationname：动画的名字（尽量语意化）

keyframes-selector：动画时长的百分比。0%-100%（或from、to）

css-styles：一个或多个合法的 CSS 样式属性

我们这里歹意一个名为 random-rotate 的动画，通过transform的rotate属性来实现旋转。代码如下：

@-webkit-keyframes random-rotate{    0%{        -webkit-transform:rotateX(0deg) rotateY(0deg);           -moz-transform:rotateX(0deg) rotateY(0deg);             -o-transform:rotateX(0deg) rotateY(0deg);                transform:rotateX(0deg) rotateY(0deg);    }    100%{        -webkit-transform:rotateX(360deg) rotateY(360deg);           -moz-transform:rotateX(360deg) rotateY(360deg);             -o-transform:rotateX(360deg) rotateY(360deg);                transform:rotateX(360deg) rotateY(360deg);    }}@-moz-keyframes random-rotate{    0%{        -webkit-transform:rotateX(0deg) rotateY(0deg);           -moz-transform:rotateX(0deg) rotateY(0deg);             -o-transform:rotateX(0deg) rotateY(0deg);                transform:rotateX(0deg) rotateY(0deg);    }    100%{        -webkit-transform:rotateX(360deg) rotateY(360deg);           -moz-transform:rotateX(360deg) rotateY(360deg);             -o-transform:rotateX(360deg) rotateY(360deg);                transform:rotateX(360deg) rotateY(360deg);    }}@-o-keyframes random-rotate{     0%{        -webkit-transform:rotateX(0deg) rotateY(0deg);           -moz-transform:rotateX(0deg) rotateY(0deg);             -o-transform:rotateX(0deg) rotateY(0deg);                transform:rotateX(0deg) rotateY(0deg);    }    100%{        -webkit-transform:rotateX(360deg) rotateY(360deg);           -moz-transform:rotateX(360deg) rotateY(360deg);             -o-transform:rotateX(360deg) rotateY(360deg);                transform:rotateX(360deg) rotateY(360deg);    }}@keyframes random-rotate{     0%{        -webkit-transform:rotateX(0deg) rotateY(0deg);           -moz-transform:rotateX(0deg) rotateY(0deg);             -o-transform:rotateX(0deg) rotateY(0deg);                transform:rotateX(0deg) rotateY(0deg);    }    100%{        -webkit-transform:rotateX(360deg) rotateY(360deg);           -moz-transform:rotateX(360deg) rotateY(360deg);             -o-transform:rotateX(360deg) rotateY(360deg);                transform:rotateX(360deg) rotateY(360deg);    }}

这里我们要这个动画x、y轴分别从0度转到 360度。

3、动画的实现

css3 里面的animation 配合 @keyframe 来实现。 animation 是一个复合属性，同样我们来看下这个复合属性的各个属性是如何定义的。

animation-name：动画的名字（@keyframe 定义好的）

animation-duration：动画执行一次的时间

animation-timing-function：动画的速度曲线（ease、linear等，等同于transform的速度曲线用法）

animation-delay：动画的延时时间

animation-interation-count：动画播放的次数（数字/infinite 无限次）

animation-direction：动画播放的方向（normal 正常/alternate 反向）

animation-play-state：动画播放状态（running 播放/paused 暂停）

animation-fill-mode：动画在开始和结束后发生的操作

下面来写下代码，我们这里让这个正方体无限转动，每次动画的时间为5s，速度为匀速，动画不延时。同时我们给动画添加一个过度的效果，使动画看起来更平滑。

外层div样式改为如下：

.dice{    width: 300px;    height: 300px;    margin: 20px auto;    position: relative;    -webkit-transform-style: preserve-3d;       -moz-transform-style: preserve-3d;                transform-style: preserve-3d;    -webkit-animation: random-rotate 5s linear 0s infinite;       -moz-animation: random-rotate 5s linear 0s infinite;        -ms-animation: random-rotate 5s linear 0s infinite;         -o-animation: random-rotate 5s linear 0s infinite;              animation: random-rotate 5s linear 0s infinite;    -webkit-transition: all 1s ease;       -moz-transition: all 1s ease;        -ms-transition: all 1s ease;         -o-transition: all 1s ease;            transition: all 1s ease;}

至此，我们已经完整的实现了一个正方体（类似于一个骰子）的旋转，有几点需要注意的提示如下：

1、由于个浏览器对css3的实现不同，记得加浏览器前缀名

2、css3动画确实很炫，但还是要根据项目的不同来进行取舍

3、css3可以实现的动画还很多，大家可以多开开脑洞，来实现属于你的css3动画

4、每个动画有自己的用途，使用时不要混淆

陳述：

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

上一篇：CSS3 transition介绍_html/css_WEB-ITnose下一篇：PowerShell 抓取网页表格_html/css_WEB-ITnose

看更多