【HTML/CSS】3d旋转木马

吴小兽_

已于 2025-02-06 17:21:03 修改

阅读量306

点赞数 3

分类专栏： HTML+CSS 文章标签： html css 前端 html5 css3 3d

于 2025-02-06 17:20:29 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_42426880/article/details/145478556

版权

HTML+CSS 专栏收录该内容

9 篇文章

订阅专栏

<div class="box">
    <img src="images/3.jpg" alt="" class="img">
    <img src="images/4.jpg" alt="" class="img item">
    <img src="images/4.jpg" alt="" class="img item">
    <img src="images/4.jpg" alt="" class="img item">
    <img src="images/4.jpg" alt="" class="img item">
    <img src="images/4.jpg" alt="" class="img item">
    <img src="images/4.jpg" alt="" class="img item">
</div>

body {
    perspective: 1000px;
}
.box {
    position: relative;
    width: 800px;
    height: 500px;
    margin: 100px auto;
    perspective: 3000px;
    transform-style: preserve-3d;
    animation: ani 6s linear infinite;
}
.box .img {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -100px;
    margin-left: -100px;
    width: 200px;
    height: 200px;
}
.box .item:nth-of-type(2) {
    transform: rotateY(0) translateZ(300px);
}
.box .item:nth-of-type(3) {
    transform: rotateY(60deg) translateZ(300px);
}
.box .item:nth-of-type(4) {
    transform: rotateY(120deg) translateZ(300px);
}
.box .item:nth-of-type(5) {
    transform: rotateY(180deg) translateZ(300px);
}
.box .item:nth-of-type(6) {
    transform: rotateY(240deg) translateZ(300px);
}
.box .item:nth-of-type(7) {
    transform: rotateY(300deg) translateZ(300px);
}
@keyframes ani {
    0% {
        transform: rotateY(0);
    }
    100% {
        transform: rotateY(360deg);
    }
}