CSS3 3D相册

李牙刷儿_

于 2017-12-18 20:29:24 发布

阅读量1.8k

点赞数 3

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

本文链接：https://blog.csdn.net/asiaLIYAZHOU/article/details/78836834

版权

本文介绍如何使用CSS3的3D属性制作一个3D相册效果，包括基本布局、图片旋转和平移、改变视角以解决重叠问题，以及添加动画效果，最终实现图片的动态展开。

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

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;