css-动画3D旋转

css实现3D效果:
1.translate 位移
translateX(): 指定X轴的位移;
translateY(): 指定Y轴的位移;
translateZ(): 指定Z轴的位移;
translate3D(): 第一个参数指定X轴的位移量, 第二个参数指定Y轴的位移量, 第三个参数指定Z轴的位移量, 3个参数缺一不可

2.rotate 旋转
rotateX(): 指定X轴的旋转角度;
rotateY(): 指定Y轴的旋转角度;
rotateZ(): 指定Z轴的旋转角度;
rotate3D(): 3D旋转,必须指定四个参数,前3个参数分别表示旋转的方向x y z, 第4个参数表示旋转的角度

3.scale 缩放
scaleX(): 指定X轴的缩放倍数;
scaleY(): 指定Y轴的缩放倍数;
scaleZ(): 指定Z轴的缩放倍数;
scale3D(): 第一个参数指定X轴的缩放倍数, 第二个参数指定Y轴的缩放倍数, 第三个参数指定Z轴的缩放倍数, 3个参数缺一不可

以下是结合了的实例:

css:

 

html:

    

效果:

在这里插入图片描述
在这里插入图片描述


本文来自互联网用户投稿,文章观点仅代表作者本人,不代表本站立场,不承担相关法律责任。如若转载,请注明出处。 如若内容造成侵权/违法违规/事实不符,请点击【内容举报】进行投诉反馈!

相关文章

立即
投稿

微信公众账号

微信扫一扫加关注

返回
顶部