这次多设计几个盒子,来制作3D动画。
<body>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</body>
同样,对他们进行CSS样式设计,样式代码很好写,写完效果如下:
html, body{
height:100%;
}
body {
background:#eb584f;
padding:0;
position:relative;
}
.box{
background:#f4f4de;
width:200px;
height:200px;
display:inline-block;
position:absolute;
left:100px;
top:200px;
box-shadow:inset 0 0 0px 10px #dd483f;
}
接下来,使用TweenMax和jQuery来设计3D动画以及形成的透视效果:设置透视效果为500像素,然后,选取每一个box,对每一个box,设置在接下来的2秒内。移动到距左侧 130*index处,上面距离top不变(top:200),绕Y轴旋转的角度也随盒子的下标增大而增大(rotationY:45+12*index),每个盒子都放大1.2倍(scale:1.2)。
<script src="js/TweenMax.min.js"></script>
<script type="text/javascript" src="jquery-2.1.4.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
CSSPlugin.defaultTransformPerspective = 500;
$('.box').each(function(index){
TweenMax.to($(this), 2, {left:index*130, top:200, rotationY:45+12*index, scale:1.2});
});
});
</script>
- CSSPlugin.defaultTransformPerspective:全局设置视觉距离
CSSPlugin的中文手册:https://www.tweenmax.com.cn/cssplugin/里面有很多例子,解释的很清楚。