css-动画3D旋转

最新推荐文章于 2025-06-20 03:47:14 发布

原创最新推荐文章于 2025-06-20 03:47:14 发布 · 682 阅读

0 ·

CC 4.0 BY-SA版权

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

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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) rotateY(-25deg) rotateZ(0deg);
		    animation: move 5s linear 0s infinite;
		}
		.box>div{
		    width: 100%;
		    height: 100%;
		    position: absolute;
		    left: 0;
		    top: 0;
		    transition: all 1s;
		}
		.box img{
		    width: 100%;
		    height: 100%;
		    opacity: 0.5;
		}
		.box1{
		    background: rgba(255, 0, 0, 0.5);
		    transform: translateZ(60px);
		}
		.box:hover > .box1{
		    transform: translateZ(100px);
		}
		.test1{
		    width: 300px !important;
		    height: 300px !important;
		    background: rgba(0, 0, 0, 0.5);
		    transform: translateZ(150px) translateX(-95px) translateY(-95px);
		}
		.box:hover > .test1{
		    transform: translateZ(250px) translateX(-95px) translateY(-95px);
		}
		
		.box2{
		    background: rgba(0, 255, 0, 0.5);
		    transform: translateZ(-60px) ;
		}
		.box:hover > .box2{
		    transform: translateZ(-100px);
		}
		.test2{
		    width: 300px !important;
		    height: 300px !important;
		    background: rgba(0, 0, 0, 0.5);
		    transform: translateZ(-150px) translateX(-95px) translateY(-95px);
		}
		.box:hover > .test2{
		    transform: translateZ(-250px) translateX(-95px) translateY(-95px);
		}
		
		.box3{
		    background: rgba(0, 0, 255, 0.5);
		    transform: translateX(60px) rotateY(90deg);
		}
		.box:hover > .box3{
		    transform: translateX(100px) rotateY(90deg);
		}
		.test3{
		    width: 300px !important;
		    height: 300px !important;
		    background: rgba(0, 0, 0, 0.5);
		    transform: translateX(150px) rotateY(90deg) translateZ(-95px) translateY(-95px);
		}
		.box:hover > .test3{
		    transform: translateX(250px) rotateY(90deg) translateZ(-95px) translateY(-95px);
		}
		
		
		.box4{
		    background: rgba(30, 100, 130, 0.5);
		    transform: translateX(-60px) rotateY(90deg);
		}
		.box:hover > .box4{
		    transform: translateX(-100px) rotateY(90deg);
		}
		.test4{
		    width: 300px !important;
		    height: 300px !important;
		    background: rgba(0, 0, 0, 0.5);
		    transform: translateX(-150px) rotateY(90deg) translateZ(-95px) translateY(-95px);
		}
		.box:hover > .test4{
		    transform: translateX(-250px) rotateY(90deg) translateZ(-95px) translateY(-95px);
		}
		
		.box5{
		    background: rgba(150, 200, 130, 0.5);
		    transform: translateY(-60px) rotateX(90deg);
		}
		.box:hover > .box5{
		    transform: translateY(-100px) rotateX(90deg);
		}
		.test5{
		    width: 300px !important;
		    height: 300px !important;
		    background:rgba(0, 0, 0, 0.5);
		    transform: translateY(-150px) rotateX(90deg) translateZ(95px) translateX(-95px);
		}
		.box:hover > .test5{
		    transform: translateY(-250px) rotateX(90deg) translateZ(95px) translateX(-95px);
		}
		
		.box6{
		    background: rgba(240, 23, 130, 0.5);
		    transform: translateY(60px) rotateX(90deg);
		}
		.box:hover > .box6{
		    transform: translateY(100px) rotateX(90deg);
		}
		.test6{
		    width: 300px !important;
		    height: 300px !important;
		    background: rgba(0, 0, 0, 0.5);
		    transform: translateY(150px) rotateX(90deg) translateZ(95px) translateX(-95px);
		}
		.box:hover > .test6{
		    transform: translateY(250px) rotateX(90deg) translateZ(95px) translateX(-95px);
		}
		@keyframes move{
		    form {transform: rotateX(-25deg) rotateY(-25deg) rotateZ(0deg);}
		    to   {transform: rotateX(-385deg) rotateY(-385deg) rotateZ(-360deg);}
		}
    </style>

html：

    <div class="box">
        <div class="box1"></div>
        <div class="box2"></div>
        <div class="box3"></div>
        <div class="box4"></div>
        <div class="box5"></div>
        <div class="box6"></div>
    </div>

效果：

在这里插入图片描述