博客

css3实现旋转木马案例

  • Post author:
  • Post category:其他


效果如下：

在这里插入图片描述
代码如下：

这个找了六张图片，放到了div里，然后每一张图片依次旋转60度，然后再沿着z轴向外移动，不能先移动再旋转，因为旋转的时候，坐标轴也进行了旋转。 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body {
            perspective: 1000px;
        }
        section {
            position: relative;
            width: 300px;
            height: 200px;
            margin: 150px auto;
            transform-style: preserve-3d;
            /*添加动画效果*/
            animation: rotate 10s linear infinite;
            background: url("media/pig.jpg") no-repeat;
        }
        section:hover{
            /*鼠标放入section暂停*/
            animation-play-state: paused;
        }
        @keyframes rotate {
            0%{
                transform: rotateY(0);
            }
            100%{
                transform: rotateY(360deg);
            }
        }
        section div {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: url("media/dog.jpg") no-repeat;
        }
        section div:nth-child(1) {
            transform: translateZ(300px);
        }
        section div:nth-child(2) {
            /*先旋转好了，再移动距离,因为旋转会改变坐标轴的方向
            */
            transform: rotateY(60deg) translateZ(300px);
        }
        section div:nth-child(3) {
            transform: rotateY(120deg) translateZ(300px);
        }
        section div:nth-child(4) {
            transform: rotateY(180deg) translateZ(300px);
        }
        section div:nth-child(5) {
            transform: rotateY(240deg) translateZ(300px);
        }
        section div:nth-child(6) {
            transform: rotateY(300deg) translateZ(300px);
        }
    </style>
</head>
<body>
<section>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</section>
</body>
</html>


版权声明：本文为dream_follower原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。