WEB前端笔记CSS-3D动画，网友：很细节，优秀！

悠悠 2022-01-29 09:13 239阅读 0赞

![WEB前端笔记CSS-3D动画，网友：很细节，优秀！][WEB_CSS-3D]

**3D在2d的基础上添加 z 轴的变化**

*  3D 位移：在2d的基础上添加 translateZ（），或者使用translate3d（）
 *  translateZ（）：以方框中心为原点，变大

**3D 缩放：在2d的基础上添加 scaleZ（），或者使用scale3d（）**

*  scaleZ（）和 scale3d（）函数单独使用时没有任何效果

**3D 透视：perspective 规定3D元素的透视效果**

*  可以取值为none或不设置，这种情况下说明没有透视效果
 *  取值越小，3d效果越明显

**3D背面可见：backface-visibility 定义元素在不面对屏幕时是否可见**

*  transform-style：规定被嵌套元素在3D空间中显示
 *  transform-style：flat；子元素将不保留其 3d 位置
 *  transform-style：preserve-3d；子元素将保留其3d位置

# **动画** #

动画是使元素从一种样式逐渐变化为另一种样式的效果。

css中通过 @keyframes 规则是创建动画，可以改变任意多的样式任意多的次数。

当在 @keyframes 创建动画，把它绑定到一个选择器，否则动画不会有任何效果。

指定至少这两个CSS3的动画属性绑定向一个选择器：

规定动画的名称

规定动画的时长

语法：@keyframes styleName \{

keyframes-selector\{css-style;\}

keyframes-selector：可以用百分比来规定变化发生的时间

也可以用关键词 "from" 和 "to"

0% 是动画的开始，100% 是动画的完成

# **3D示例** #

<!DOCTYPE html>
    <html lang="en">
    <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <meta http-equiv="X-UA-Compatible" content="ie=edge">
     <title>Document</title>
     <style type="text/css">
     * {margin: 0; padding: 0;}
     .box {width: 600px; height: 600px; margin: 0 auto; position: relative; perspective: 800px;}
     .box ul {list-style: none; width: 300px; height: 300px; transition: all 2s;
     position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; transform-style: preserve-3d;}
     .box ul li {width: 300px; height: 300px; text-align: center; line-height: 100px;
     position: absolute; font-size: 36px;} 
     .box ul li:nth-child(1) {background: rgba(255, 0, 255, 0.5); transform: translateY(-150px) rotateX(90deg);}
     .box ul li:nth-child(2) {background: rgba(192, 157, 81, 0.5); transform: translateY(150px) rotateX(-90deg);}
     .box ul li:nth-child(3) {background: rgba(35, 130, 142, 0.5); transform: translateX(-150px) rotateY(-90deg);}
     .box ul li:nth-child(4) {background: rgba(142, 35, 35, 0.5); transform: translateX(-150px) rotateY(90deg);}
     .box ul li:nth-child(5) {background: rgba(121, 17, 240, 0.5); transform: translateZ(150px);}
     .box ul li:nth-child(6) {background: rgba(47, 142, 35, 0.5); transform: translateZ(-150px) rotateY(180deg);}
     
     .box ul:hover {transform:rotateX(360deg) rotateY(360deg);}
     </style>
    </head>
    <body>
     <div class="box">
     <ul>
     <li>上</li>
     <li>下</li>
     <li>左</li>
     <li>右</li>
     <li>前</li>
     <li>后</li>
     </ul>
     </div>
    </body>
    </html>

# **结果** #

![WEB前端笔记CSS-3D动画，网友：很细节，优秀！][WEB_CSS-3D 1]

# **动画示例** #

<!DOCTYPE html>
    <html>
    <head>
     <meta charset="utf-8"> 
     <title>Demo</title>
     <style> 
     .box {
     width:100px;
     height:100px;
     background:red;
     position:relative;
     animation:animationStyle 5s linear 2s infinite alternate;
     }
     @keyframes animationStyle
     {
     0% {background:red; left:0px; top:0px;}
     25% {background:yellow; left:200px; top:0px;}
     50% {background:blue; left:200px; top:200px;}
     75% {background:green; left:0px; top:200px;}
     100% {background:red; left:0px; top:0px;}
     }
     </style>
    </head>
    <body>
     <div class="box"></div>
    </body>
    </html>

# **结果** #

![WEB前端笔记CSS-3D动画，网友：很细节，优秀！][WEB_CSS-3D 2]

下面是小编整理的一整套系统的web前端学习教程，加群即可免费领取！

自己整理了一份最全面前端学习资料,从最基础的HTML+CSS+JS \[炫酷特效，游戏，插件封装，设计模式\]到移动端HTML5的项目实战的学习资料都有整理，送给每一位前端小伙伴, 有想学习web前端的，或是转行，或是大学生，还有工作中想提升自己能力的，正在学习的小伙伴欢迎加入学习。

加Q 裙：853597293（招募中）

[WEB_CSS-3D]: /images/20220129/627a036e30944ba3aea86fd91cf755f1.png
[WEB_CSS-3D 1]: /images/20220129/713a33dce0e64d929cb5e059d112366c.png
[WEB_CSS-3D 2]: http://p1.pstatp.com/large/pgc-image/7d75c1d5eab0444db749876f007c1b5e