CSS3 3D相册
程序员文章站
2022-07-12 23:32:04
...
今天来做一个基于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;
}
}
大功告成!
上一篇: unity如何获得响应鼠标点击的ui gameObject
下一篇: Lucene入门案例