码迷,mamicode.com
首页 > Web开发 > 详细

CSS3最颠覆性的动画效果,基本属性[3D]

时间:2019-05-19 10:24:58      阅读:145      评论:0      收藏:0      [点我收藏+]

标签:src   动画效果   rspec   nsf   width   图片   动画   sla   load   

和2D一样也是transform 即变形

技术图片技术图片

 

技术图片

 

1)rotateX rotateY rotateZ(也可以用transform-origin来设置旋转中心点)

 

2)透视(perspective)

给父亲加透视,透视就是模拟眼睛到物体的距离,近大远小,即数值越小,3D越明显

 技术图片

技术图片

理解透视就是把眼睛放在离物体多远的地方看,不设置透视可以理解成在无穷远处看,和太阳光一样,不会因为Z改变而看出变化

 技术图片                                           技术图片

技术图片

 

translate3d(x,y,z)//一下写3个    其中x,y可以是px可以是%(和相对定位一样,自恋型) 而z只能是px

 

backface-visibility//只要是反面朝向我们,我们设置隐藏

技术图片

 

技术图片

 

CSS3最颠覆性的动画效果,基本属性[3D]

标签:src   动画效果   rspec   nsf   width   图片   动画   sla   load   

原文地址:https://www.cnblogs.com/ningxinjie/p/10888094.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!