css动效：旋转相框、摩天轮

最新推荐文章于 2024-07-25 10:45:42 发布

qdcxy_lj

最新推荐文章于 2024-07-25 10:45:42 发布

阅读量198

点赞数 1

分类专栏： css+h5进阶

本文链接：https://blog.csdn.net/qdcxy_lj/article/details/123405914

版权

CSS3 3D变换动画效果关键帧图像旋转

关键词由CSDN通过智能技术生成

css+h5进阶专栏收录该内容

7 篇文章 0 订阅

订阅专栏

旋转相框

<!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: 1800px;}
        .box{width: 133px;height: 200px;border: 1px solid black;position: relative;
            margin: 150px auto;transform-style: preserve-3d;perspective: 1800px;
            animation: rotate 10s infinite linear;
        }
        .box img{position: absolute;left: 0;top: 0;}
        .box img:nth-child(1){transform: rotateY(36deg) translateZ(300px);}
        .box img:nth-child(2){transform: rotateY(36deg) translateZ(-300px);}
        .box img:nth-child(3){transform: rotateY(72deg) translateZ(300px);}
        .box img:nth-child(4){transform: rotateY(72deg) translateZ(-300px);}
        .box img:nth-child(5){transform: rotateY(108deg) translateZ(300px);}
        .box img:nth-child(6){transform: rotateY(108deg) translateZ(-300px);}
        .box img:nth-child(7){transform: rotateY(144deg) translateZ(300px);}
        .box img:nth-child(8){transform: rotateY(144deg) translateZ(-300px);}
        .box img:nth-child(9){transform: rotateY(180deg) translateZ(300px);}
        .box img:nth-child(10){transform: rotateY(180deg) translateZ(-300px);}
        @keyframes rotate{
            0%{transform: rotatey(0deg) rotateX(0deg);}
            50%{transform: rotatey(180deg) rotateX(10deg);}
            100%{transform: rotatey(360deg) rotateX(0deg);}
        }
    </style>
</head>
<body>
    <div class="box">
        <img src="./imgs/1.jpg" alt="">
        <img src="./imgs/2.jpg" alt="">
        <img src="./imgs/3.jpg" alt="">
        <img src="./imgs/4.jpg" alt="">
        <img src="./imgs/6.jpg" alt="">
        <img src="./imgs/7.jpg" alt="">
        <img src="./imgs/8.jpg" alt="">
        <img src="./imgs/9.jpg" alt="">
        <img src="./imgs/10.jpg" alt="">
    </div>
</body>
</html>

摩天轮

<!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{background: #bbb;}
        .box{width: 600px;height: 600px;background: url(./imgs/bg.jpeg) no-repeat;animation: big 5s linear infinite;
            margin: 5px auto;background-position: center;background-size: cover;position: relative;
        }
        .box img{position: absolute;animation: smiall 5s linear infinite;width: 100px;
            height: 100px;position: absolute;transform-origin: center top;
        }
        .box img:nth-child(1){left: 250px;top:30px;}
        .box img:nth-child(2){left: 430px;top:100px;}
        .box img:nth-child(3){left: 520px;top:300px;}
        .box img:nth-child(4){left: 430px;top:470px;}
        .box img:nth-child(5){left: 250px;top:550px;}
        .box img:nth-child(6){left: 60px;top:470px;}
        .box img:nth-child(7){left: -10px;top:300px;}
        .box img:nth-child(8){left: 60px;top:100px;}
        @keyframes big{
            0%{transform: rotate(0deg);}
            100%{transform: rotate(360deg);}
        }
        @keyframes smiall{
            0%{transform: rotate(360deg);}
            100%{transform: rotate(0deg);}
        }
    </style>
</head>
<body>
    <div class="box">
        <img src="./imgs/1.webp" alt="">
        <img src="./imgs/1.webp" alt="">
        <img src="./imgs/1.webp" alt="">
        <img src="./imgs/1.webp" alt="">
        <img src="./imgs/1.webp" alt="">
        <img src="./imgs/1.webp" alt="">
        <img src="./imgs/1.webp" alt="">
        <img src="./imgs/1.webp" alt="">
    </div>
</body>
</html>