css3-3D透明照片墙

最新推荐文章于 2024-06-18 15:33:14 发布

github_34514750

最新推荐文章于 2024-06-18 15:33:14 发布

阅读量2.7k

点赞数 1

分类专栏： css 文章标签： css3 动画

本文链接：https://blog.csdn.net/github_34514750/article/details/51866392

版权

1.准备n张照片div放入照片，在同一个父级容器下设置父类的transform-style:preserve-3d和persepective六个div设置成绝对定位，重叠在一起2.子元素做简单的变换，成旋转木马形状图片子元素用transform:rotate旋转因此是绕 Y 轴的，我们关心的是 rotateY 的大小，根据我们添加的图片数量，用 360° 的圆周角将每个图片等分，也就是让每张图片绕

摘要由CSDN通过智能技术生成

1.准备n张照片

div放入照片，在同一个父级容器下

设置父类的transform-style:preserve-3d和persepective

六个div设置成绝对定位，重叠在一起

2.子元素做简单的变换，成旋转木马形状图片

子元素用transform:rotate旋转

因此是绕 Y 轴的，我们关心的是 rotateY 的大小，根据我们添加的图片数量，用 360° 的圆周角将每个图片等分，也就是让每张图片绕 Y 轴旋转固定角度依次散开

3.每个子元素做translateZ变换

N 张图片设定一个 translateZ 后，图片就很自然以中点为圆心分散开了

4.父元素做动画

最后利用 animation ，也就是包裹着图片的容器绕 Y 轴旋转起来（rotateY）或者绕X,Y,Z旋转，那么一个类似旋转木马的 3D 照片墙效果就完成了！

https://github.com/wanghuanweb/wanghuan.github.io/tree/master/css/css3%E5%8A%A8%E7%94%BB%E8%AE%BE%E8%AE%A1/3D%E9%80%8F%E6%98%8E%E7%85%A7%E7%89%87%E5%A2%99

<!DOCTYPE html>

<html>
    <head>
        <meta charset="utf-8">
        <link href="index.css" rel="stylesheet">
    </head>

    <body>
        <div class="container">
            <div class="box box1"></div>
            <div class="box box2"></div>
            <div class="box box3"></div>
            <div class="box box4"></div>
            <div class="box box5"></div>
            <div class="box box6"></div>
        </div>
    </body>
</html>

*{
    margin: 0px;
    padding: 0px;
}

html,body

最低0.47元/天解锁文章

github_34514750

关注

1
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
css3-3D透明照片墙

1.准备n张照片div放入照片，在同一个父级容器下设置父类的transform-style:preserve-3d和persepective六个div设置成绝对定位，重叠在一起2.子元素做简单的变换，成旋转木马形状图片子元素用transform:rotate旋转因此是绕 Y 轴的，我们关心的是 rotateY 的大小，根据我们添加的图片数量，用 360° 的圆周角将每个图片等分，也就是让每张图片绕
复制链接

扫一扫

专栏目录