CSS3 3D相册

来源：互联网发布：提取方格网4角数据编辑：程序博客网时间：2024/04/30 00:57

3D album.gif

今天来做一个基于CSS3 3D属性的3D相册效果。

1 基本布局

首先来完成基本布局，从效果图中可以看到，所有图片一开始均位于同一位置，然后经过不同的角度的旋转以及平移到不同的位置，达到一个”旋转散开”的效果。所以基本的思路就是：

所有图片定位到页面中同一位置
遍历图片，利用transform属性进行旋转、平移，加上transition制造动画效果
调整perspective,改变视角

所有首先来完成基本布局：

<!DOCTYPE html><html>    <head>        <meta charst="utf-8">        <title>3D相册</title>        <style>            * {                margin: 0px;                padding: 0px;            }            body {                background-color: #000;            }            .images {                width: 100px;                height: 100px;                margin: 150px auto;                position: relative;            }            .images img {                position: absolute;                box-shadow: 0px 0px 8px #eee;            }        </style>    </head>    <body>        <div class="container">            <div id="warp" class="images">                <img src="images/01.png">                <img src="images/02.png">                <img src="images/03.png">                <img src="images/04.png">                <img src="images/05.png">                <img src="images/06.png">                <img src="images/07.png">                <img src="images/08.png">                <img src="images/09.png">                <img src="images/10.png">                <img src="images/11.png">            </div>        </div>    </body></html>

现在所有图片都重叠到了一起。

2 旋转、平移

接下来我们需要对各个图片进行旋转、平移。从图中可以看到，所有的图片都是绕Y轴进行了一定的旋转，所有首先来给各个图片加上一个旋转效果，之于旋转角度则各个图片平分：

<script>    window.onload = function() {        var wrap = document.getElementById('wrap');        var images = document.getElementsByTagName("img");        var length = images.length;        var deg = 360 / length;        for(var i = 0; i < length; i++) {          var transform = "rotateY(" + deg * i + "deg) ";          images[i].style.transform = transform;        }     }</script>

可以看到，图片已经出现了不同程度的旋转，但是依然是重叠在一起的。所以接下来就是让各个图片”分开”：按Z轴方向进行平移：

    window.onload = function() {        var wrap = document.getElementById('wrap');        var images = document.getElementsByTagName("img");        var length = images.length;        var deg = 360 / length;        for(var i = 0; i < length; i++) {          var transform = "rotateY(" + deg * i + "deg) tranlateZ(240px)";          images[i].style.transform = transform;        }     }

可以看到，图片进行了平移，也达到了”展开”的效果，但由于均处于同一平面，从用户角度观察，依然存在重叠。

3 改变视角

为了解决重叠问题，需要改变视角，这时就需要用到perspective + transform：

利用perspective指定视角距离
然后通过旋转改变视角
另外由于视角的改变，在进行transform时需要设定transform-style

.container {  perspective: 1000px; /*perspective属性指定了观察者与Z=0平面的距离*/}.images {  width: 100px;  height: 100px;  margin: 150px auto;  position: relative;  transform: rotateX(-50deg) ;  transform-style: preserve-3d;}

可以看到，图片已经均匀展开了。

4 动画效果

最后我们再来给图片的运动加上动画效果：transition属性上场了。为了然动画看起来不凌乱，我们可以通过transition中的延迟来完成:

window.onload = function() {  var wrap = document.getElementById('wrap');  var images = document.getElementsByTagName("img");  var length = images.length;  var deg = 360 / length;  for(var i = 0; i < length; i++) {    var transform = "rotateY(" + deg * i + "deg) translateZ(240px)";    var transition = "1s " + 0.2 * i + "s";  // 通过延迟让图片运动排队    images[i].style.transform = transform;    images[length - i - 1].style.transition = transition;  } }

大功告成！

阅读全文

0 0