css动画-3d旋转盒子

css动画-3d旋转盒子

效果图：

思路：
1、一个容器，装6个子容器放6张图（我是采用的ul列表）

<ul class="container">
	<li id="b1"></li>
	<li id="b2"></li>
	<li id="b3"></li>
	<li id="b4"></li>
	<li id="b5"></li>
	<li id="b6"></li>
</ul>

/* 正面 */
#b1{
	background: url(../img/1.jpg) no-repeat;
	background-size: cover;
	transform: translateZ(200px);
}

2、调整六张图的位置形成一个正方形

#b2{
	background: url(../img/2.jpg) no-repeat;
	background-size: cover;
	transform: translateZ(-200px) rotateZ(180deg);
}

其中的transform: translateZ(-200px) rotateZ(180deg);就是调整图片位置的，三位感觉不强的可以拿个手机比作一张图进行旋转平移
3、设置动画，让这个盒子旋转起来

rotate3d(x, y, z, a) 在3D空间之中，旋转有3个自由维度，描述了旋转轴。旋转轴由一组 [x, y, z]
矢量定义，并且通过变换源点传递（即通过 transform-origin CSS
属性定义）。如果这些矢量被赋予非标准值，即3个坐标值的平方和不等于1时，它将会被内部隐式标准化。非标准矢量，例如空值和 [0, 0,
0]，将会使旋转不起作用，但是不影响整个CSS属性的其他效果。

@keyframes rotate{
	from{}
	to{
		transform: rotate3d(1,1,1,-720deg);
	}
}

4、设置鼠标悬浮样式
此处b2的hover需要与b2的旋转同步，否则就会无效

.container:hover #b2{
	transform: translateZ(-300px) rotateZ(180deg);
}

需要注意的一些问题：
[1] 3d动画记得设置3d属性transform-style: preserve-3d;
[2] 如何重置3d定位中心transform-origin:center center;
[3] left:0; right:0; top:0; bottom:0; margin：auto;
会使text居中，如果text没有宽高，则会继承父集的宽高，适合body 内的遮罩。本文的ul页面居中就是用了这个方法
[4] 关于三维坐标系：

x正方向指向屏幕右边，y正方向指向屏幕下方，z正方向指向你自己

图片来自：博客css动画2d，3d旋转平移，博主讲的比较详细

[5] 如果有多个旋转是一定要同步，不然无法达到预设效果，比如本次实例中：鼠标悬浮会展开，展开是在这个方向上向外平移，但是如果只进行平移操作，就会发现无效，原因就是盒子在旋转如果hover属性没有设置旋转属性导致无法同步

资源同步上传，欢迎参考交流