3D转换——旋转海报-CSDN博客

本文链接：https://blog.csdn.net/weixin_38158043/article/details/83019930

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>旋转海报</title>

    <style>
        .four{
            width: 200px;
            height: 200px;
            box-sizing: border-box;
            margin: 200px auto;
            transform-style: preserve-3d; /*使被转换的子元素保留其 3D 转换：*/

            /*transform-style: flat|preserve-3d;
            flat	子元素将不保留其 3D 位置。
            preserve-3d	子元素将保留其 3D 位置。*/

            position: relative;
            transform: rotateY(0deg) rotateX(0deg) rotateZ(0deg);
            animation:sport 5s linear 0s infinite normal;
        }
        @keyframes sport {
            from{
                transform:rotateX(0deg);
            }
            to{
                transform:rotateX(360deg);
            }
        }
        .four li{
            list-style: none;
            width: 200px;
            height: 200px;
            text-align: center;
            line-height: 200px;
            font-size: 40px;
            position: absolute;
            left: 0;
            top: 0;
        }
        .four li:nth-child(1){
            background-color: pink;
            transform:rotateX(90deg) translateZ(100px) scale(2,1);
        }
        .four li:nth-child(2){
            background-color: orange;
            transform:rotateX(180deg) translateZ(100px) scale(2,1);
        }
        .four li:nth-child(3){
            background-color: tomato;
            transform:rotateX(270deg) translateZ(100px) scale(2,1);
        }
        .four li:nth-child(4){
            background-color: yellowgreen;
            transform:rotateX(360deg) translateZ(100px) scale(2,1);
        }
        .four li:nth-child(5){
            background-color: skyblue;
            transform:translateX(-200px) rotateY(90deg);
        }
        .four li:nth-child(6){
            background-color: yellow;
            transform:translateX(200px) rotateY(90deg);
        }
        .four li img{
            /*只要父元素被拉伸了，子元素也会拉伸*/
            width: 200px;
            height: 200px;
            border: 1px solid #000;
        }
    </style>

</head>
<body>

<ul class="four">
    <li><img src="image/Jay1.jpg" alt=""></li>
    <li><img src="image/Jay2.jpg" alt=""></li>
    <li><img src="image/Jay3.jpg" alt=""></li>
    <li><img src="image/Jay4.jpg" alt=""></li>
    <li></li>
    <li></li>
</ul>

</body>
</html>