css-动画3D旋转

最新推荐文章于 2022-10-11 10:13:03 发布

hwc520jj

最新推荐文章于 2022-10-11 10:13:03 发布

阅读量624

点赞数

本文链接：https://blog.csdn.net/weixin_45846427/article/details/105776573

版权

本文介绍了CSS如何实现3D效果，包括translate位移、rotate旋转和scale缩放的详细用法，如translateX、rotateY、scaleZ等，并提供了实际的3D旋转实例。

摘要由CSDN通过智能技术生成

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:

 <style>
        body,html{
		    margin: 0;
		    padding: 0;
		    width: 100%;
		    height: 100%;
		
		    display: flex;
		    justify-content: center;
		    align-items: center;
		
		    /*透视*/
		    perspective: 800px;
		}
		.box{
		    position: relative;
		    width: 120px;
		    height: 120px;
		    transform-style: preserve-3d;
		    transform: rotateX(-25deg) rot