3d旋转相册

最新推荐文章于 2022-12-03 15:43:31 发布

借我一秋风

最新推荐文章于 2022-12-03 15:43:31 发布

阅读量620

点赞数 1

文章标签： css html

本文链接：https://blog.csdn.net/qq_53489791/article/details/119297462

版权

3d旋转相册

1.首先所有的图片的容器绝对定位，叠放在一起，然后一次设置rotateY依次增加45deg ，然后为每个图片的容器设置translateZ，向Z轴方向移动500px，所有图片会从对应的角度向外移动，像圆形一样展开。
2.创建动画，让rotateY旋转360deg。然后给盒子添加动画，时间为16s，设置linear和infinite，让动画匀速无限次播放。
3.给最后一张图片设置反向旋转，就可以使其看起来是静止的。
源代码：

 <style>
        @keyframes anima {
            0% {
                transform: rotateY(0deg);
            }
            100% {
                transform: rotateY(360deg);
            }
        }
        
        body {
            perspective: 800px;
            transform-style: preserve-3d;
        }
        
        .box {
            margin: 300px auto;
            /* position: absolute;
            top: 400px;
            left: 0;
            right: 0;
            bottom: 0;
            margin: auto; */
            width: 300px;
            height: 200px;
            transform: rotateX(20deg);
            transform-style: preserve-3d;
            animation: anima 16s linear infinite;
        }
        
        .box img {
            position: absolute;
            width: 300px;
            height: 200px;
        }
        
        .box img:nth-child(1) {
            transform: rotateY(45deg) translateZ(500px);
        }
        
        .box img:nth-child(2) {
            transform: rotateY(90deg) translateZ(500px);
        }
        
        .box img:nth-child(3) {
            transform: rotateY(135deg) translateZ(500px);
        }
        
        .box img:nth-child(4) {
            transform: rotateY(180deg) translateZ(500px);
        }
        
        .box img:nth-child(5) {
            transform: rotateY(225deg) translateZ(500px);
        }
        
        .box img:nth-child(6) {
            transform: rotateY(270deg) translateZ(500px);
        }
        
        .box img:nth-child(7) {
            transform: rotateY(315deg) translateZ(500px);
        }
        
        .box img:nth-child(8) {
            transform: rotateY(360deg) translateZ(500px);
        }
        
        .box img:nth-child(9) {
            transform: rotateY(0) translateZ(0);
            animation: img9 16s infinite linear;
        }
        
        @keyframes img9 {
            0% {
                transform: rotateY(0deg);
            }
            100% {
                transform: rotateY(-360deg);
            }
        }
    </style>

<body>
    <div class="box">
        <img src="./p1.jpeg" alt="">
        <img src="./p2.jpeg" alt="">
        <img src="./p3.jpeg" alt="">
        <img src="./p4.jpeg" alt="">
        <img src="./p5.jpeg" alt="">
        <img src="./p6.jpeg" alt="">
        <img src="./p7.jpeg" alt="">
        <img src="./p8.jpeg" alt="">
        <img src="./00.jpeg" alt="">
    </div>
</body>

效果图：
请添加图片描述

借我一秋风

关注

1
点赞
踩
10

收藏

觉得还不错? 一键收藏
0
评论
3d旋转相册

3d旋转相册1.首先所有的图片的容器绝对定位，叠放在一起，然后一次设置rotateY依次增加45deg ，然后为每个图片的容器设置translateZ，向Z轴方向移动500px，所有图片会从对应的角度向外移动，像圆形一样展开。2.创建动画，让rotateY旋转360deg。然后给盒子添加动画，时间为16s，设置linear和infinite，让动画匀速无限次播放。3.给最后一张图片设置反向旋转，就可以使其看起来是静止的。源代码： <style> @keyframes
复制链接

扫一扫