旋转木马

最新推荐文章于 2021-07-19 11:52:59 发布

我叫长安，你叫故里

最新推荐文章于 2021-07-19 11:52:59 发布

阅读量133

点赞数 2

分类专栏： CSS-3D

本文链接：https://blog.csdn.net/weixin_51297712/article/details/112809529

版权

CSS-3D 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

核心词汇： perspective: 700px; /景深，透视/
transform-style: preserve-3d; /把内部变成一个3d空间/
原理：利用3D空间对图片进行处理
步骤：
在这里插入图片描述
来吧，展示

1609846919266

HTML结构：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>旋转木马</title>
    <link rel="stylesheet" href="css/public.css">
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
<!-- 旋转木马 -->
<div class="box">
    <ul>
        <li>
            <img src="images/person1.jpg" width="128" height="94">
        </li>
        <li>
            <img src="images/person2.jpg" width="128" height="94">
        </li>
        <li>
            <img src="images/person3.jpg" width="128" height="94">
        </li>
        <li>
            <img src="images/person4.jpg" width="128" height="94">
        </li>
        <li>
            <img src="images/person5.jpg" width="128" height="94">
        </li>
        <li>
            <img src="images/person6.jpg" width="128" height="94">
        </li>
    </ul>
</div>
<!-- 旋转木马end -->
</body>
</html>

公共样式：

@charset "utf-8";
*{
    margin: 0;
    padding: 0;
}
body{
    font-family: Arial,Verdana,"Microsoft YaHei",STXihei,SimSun;
    font-size: 16px;
}
img{
    display: block;
}
ul,li,ol{
    list-style: none;   /*去掉样式*/
}

style样式：

@charset "utf-8";
.box{
    width: 600px;
    height: 300px;
    border: 2px #000 solid;
    margin: 100px auto;
    perspective: 700px; /*景深，透视*/
}
.box ul{
    width: 128px; /*与图片宽高一致*/
    height: 94px;
    position: relative;
    margin: 100px auto;
    transform-style: preserve-3d; /*把内部变成一个3d空间*/
    animation: rotate 3s linear infinite;
}
.box ul li{
    width: 100%; /*继承父容器宽高*/
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
}
.box ul li:nth-child(1){
    transform: rotateY(0) translateZ(200px);
}
.box ul li:nth-child(2){
    transform: rotateY(60deg) translateZ(200px);
}
.box ul li:nth-child(3){
    transform: rotateY(120deg) translateZ(200px);
}
.box ul li:nth-child(4){
    transform: rotateY(180deg) translateZ(200px);
}
.box ul li:nth-child(5){
    transform: rotateY(240deg) translateZ(200px);
}
.box ul li:nth-child(6){
    transform: rotateY(300deg) translateZ(200px);
}
@keyframes rotate {
    0%{
        transform: rotateY(0);
    }
    100%{
        transform:rotateY(360deg);
    }
}