CSS旋转木马的效果

最新推荐文章于 2024-06-25 14:34:30 发布

茶理li

最新推荐文章于 2024-06-25 14:34:30 发布

阅读量236

点赞数

文章标签： css3 html

本文链接：https://blog.csdn.net/tuoersuo/article/details/107138819

版权

代码：
HTML部分

    <div class="container">
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
    </div>

css部分：

.container{
    width: 1000px;
    height: 500px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%) rotateX(-5deg);
    transform-style: preserve-3d;
    animation: round 10s linear infinite;

}
@keyframes round{
    0%{}
    100%{
        transform: translate(-50%,-50%) rotateX(-5deg) rotateY(360deg);
    }
}
.item{
    width: 250px;
    height: 350px;
    outline: 1px solid red;
    background-position: center;
    background-size: cover;
    position: absolute;
    top:calc(50% - 350px/2);
    left:calc(50% - 250px/2);
}

.item:nth-child(1){
    background-image: url(../img/1.jpg);
    transform: translateZ(350px);
}
.item:nth-child(2){
    background-image: url(../img/2.jpg);
    transform: rotateY(45deg) translateZ(350px) ;
}
.item:nth-child(3){
    background-image: url(../img/3.jpg);
    transform: rotateY(90deg) translateZ(350px) ;
}
.item:nth-child(4){
    background-image: url(../img/4.jpg);
    transform: rotateY(135deg) translateZ(350px) ;
}
.item:nth-child(5){
    background-image: url(../img/5.jpg);
    transform: rotateY(180deg) translateZ(350px) ;
}
.item:nth-child(6){
    background-image: url(../img/6.jpg);
    transform:rotateY(225deg) translateZ(350px) ;
}
.item:nth-child(7){
    background-image: url(../img/7.jpg);
    transform: rotateY(270deg) translateZ(350px) ;
}
.item:nth-child(8){
    background-image: url(../img/8.jpg);
    transform: rotateY(315deg) translateZ(350px) ;
}