css实现3D动画

最新推荐文章于 2024-08-12 11:00:42 发布

动心。

最新推荐文章于 2024-08-12 11:00:42 发布

阅读量3.1k

点赞数 2

分类专栏：个人文章标签： css

本文链接：https://blog.csdn.net/qq_43494108/article/details/97616795

版权

个人专栏收录该内容

5 篇文章 2 订阅

订阅专栏

使用css3实现3d旋转动画

今天给大家带来的是使用css3实现旋转动画首先我们来看代码

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <div id="big">
        <div id="first"><img src="wallhaven-5wr583.png"/></div>
        <div id="second"><img src="wallhaven-wymoeq.jpg"/></div>
        <div id="third"><img src="wallhaven-q6l3jq.jpg"/></div>
        <div id="fourth"><img src="wallhaven-wym8vx.png"/></div>
        <div id="fifth"><img src="wallhaven-13x79v.jpg"/></div>
        <div id="sixth"><img src="wallhaven-39r5xv.jpg"/></div>
    </div>
<body>
</html>

首先我们先画一个大盒子，也就是旋转的容器，然后在里面再去添加几个小盒子用来展示图片。接着就设置css样式了
首先我们给这个大盒子的perspective属性设置透视距离就可以让里面的一张图片设置在后面而且不会被覆盖;
不过要注意的是设置perspective属性的时候只能比盒子的大，不然盒子会变形，设置个100000px都没问题;
然后通过大盒子的transform-style属性来设置成3D样式不然到时候设置里面小盒子的旋转平移的时候就会要在每个形变函数后面加上3D;这样就很麻烦;

#big{
    perspective: 10000px;
    position: relative;/*设置透视*/
    top: 300px;
    left: 200px;
    transform-style: preserve-3d;/*设置成3D样式*/
    animation: name 8s linear;
    width: 500px;
    height: 500px;
}
#big div{
    width: 500px;
    height: 500px;
    position: absolute;
}
img{
    width: 100%;
    height: 100%;
}

然后通过translate和rotate函数来设置各个小盒子的位置

/*最左边的图片位置*/
#first{
    transform:translateX(-250px)rotateY(-90deg);
}
/*最前面的图片位置*/
#second{
    transform:translateZ(250px);
}
/*最右边的图片位置*/
#third{
    transform: translateX(250px) rotateY(90deg);
}
/*最后面的图片位置*/
#fourth{
    transform: translateZ(-250px);
}
/*最下面的图片位置*/
#fifth{
    transform: translateY(250px) rotateX(90deg);
}
/*最上面的图片位置*/
#sixth{
    transform: translateY(-250px) rotateX(90deg);
}

然后设置大盒子的旋转动画

@keyframes name {
    0%{
        transform: rotateX(0deg) rotateY(0deg);
    }
    33%{
        transform: rotateY(120deg) rotateX(120deg);
    }
    66%{
        transform: rotateY(240deg) rotateX(240deg);
    }
    100%{
        transform: rotateY(360deg) rotateX(360deg);
    }
}