CSS动画-3d旋转袋子
效果图：
想法：
1. 1个容器，6个子容器，6张图片（我用的是ul列表）
7c286cfa5c1e9264f3172433d979c7bf
<code class="prism language-css"><ul class="container"> <li id="b1"> <li id="b2"> <li id="b3"> <li id="b4"> <li id="b5"> <li id="b6">
/* 正面 */
#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); 就是调整图片的位置。 如果三人觉得不强css旋转属性，可以拿手机叫图片旋转和平移
3.设置动画让袋子旋转
rotate3d(x, y, z, a) 在 3D 空间中css旋转属性，旋转有 3 个自由维度，描述旋转轴。 旋转轴由一组 [x, y, z] 组成
通过transform-origin定义并传递的向量（即通过transform-origin CSS
属性定义）。 如果这样的向量被赋予非归一化值，即三个坐标值的平方和不等于1，它将在内部隐式归一化。 非标准向量，例如 null 和 [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] 左：0； 右：0； 顶部：0； 底部：0； 保证金：自动；
它将使文本居中。 如果文字没有宽度和高度，则会继承父设置的宽度和高度，适合body中的笔画。此技术用于本文的ul页面居中
[4]关于三维坐标系：
x 正方向指向屏幕左侧，y 正方向指向屏幕底部，z 正方向指向您自己
图片来自：博客css动画2d、3d旋转和平移，博主讲得比较详细
[5]如果有多个旋转，必须同步，否则很难达到预设的效果。 比如这个例子：悬浮鼠标会展开，展开就是朝这个方向向外平移，但是如果只进行平移操作，会发现无效，原因是如果hover属性的话，包是旋转的没有设置旋转属性，很难同步
资源同步上传，欢迎参考交流
