CSS3 3D相册

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

1 基本布局

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

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

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


<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轴进行了一定的旋转,所有首先来给各个图片加上一个旋转效果,之于旋转角度则各个图片平分:


                    
                    

你可能感兴趣的:(前端)