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示例

 
 
 
 
 


 

 

 
上
 
下
 
左
 
右
 
前
 
后
 
 

结果

 

动画示例

结果

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

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

加Q 裙：853597293（招募中）