CSS3 3D相册-阿里云开发者社区

开发者社区> 云原生> 正文
登录阅读全文

CSS3 3D相册

简介: CSS 3D相册

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>

3d_album1.png

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

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>

3d_album2.png

可以看到,图片已经出现了不同程度的旋转,但是依然是重叠在一起的。所以接下来就是让各个图片"分开":按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;
        } 
    }

3d_album3.png

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

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;
}

3d_album4.png

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

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;
  } 
}

大功告成!

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

分享:
云原生
使用钉钉扫一扫加入圈子
+ 订阅

云原生时代,是开发者最好的时代

其他文章