提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  其他

当前栏目

CSS笔记(27)之旋转木马案例

案例笔记CSS 27 木马 旋转
2023-06-13 09:12:59 时间

今天做了一个旋转木马的案例:

受到弹幕的启发:先让每个都旋转好角度,然后都向前移动,但是这里也要注意顺序的问题.

如果是先沿着Z轴正方向移动再旋转60°,那就是这样的效果:

正面

仰视

如果是先旋转60°再沿着Z轴正方向移动,那就是这样的效果:

正面

仰视

完整的代码: 

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            perspective: 2000px;
        }

        section {
            transform-style: preserve-3d;
            position: relative;
            width: 300px;
            height: 200px;
            margin: 100px auto;
            transition: all 12s linear ;
        }

        section div {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-image: url(../images/dog.jpg);
        }

        .one {
            transform: translateZ(400px)
        }

        .two {
            transform: rotateY(60deg) translateZ(400px);
        }
        
        .three {
            transform: rotateY(120deg) translateZ(400px);
        }
        
        .four {
            transform: rotateY(180deg) translateZ(400px);
        }
        
        .five {
            transform: rotateY(240deg) translateZ(400px);
        }
        
        .six {
            transform: rotateY(300deg) translateZ(400px);
        }
        
        .mid {
            background-image: url(../images/dog.jpg);
        }
        
        section:hover {
            transform: rotateY(360deg);
        }
</style>
</head>

<body>
    <section>
        <div class="one"></div>
        <div class="two"></div>
        <div class="three"></div>
        <div class="four"></div>
        <div class="five"></div>
        <div class="six"></div>
        <div class="mid"></div>
    </section>
</body>

</html>

相关文章