今天来做一个基于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;