旋转方体相册
- 先看效果图片
-
鼠标移上去就变成了这样子
它外面还有一层图片,并且两个的图片都是会转动! - 接下来看一下HTML的代码
- HTML我们可以看到其实就几个div标签!
- css的代码
-
/* linear:每一步的距离和前一步都是相同的,也就是等速
若不加linear,那会默认速度会加快然后最后一点距离再减速 /
/ translateZ(z) 定义 3D 转换,只是用 Z 轴的值。/
/ scaleY(y) 通过设置 Y 轴的值来定义缩放转换。*/
/* cursor属性定义了鼠标指针放在一个元素边界范围内时所用的光标形状 /
transform:rotateX(20deg) rotateY(30deg); /定义转换,只是用 X 轴的值。 定义转换,只是用 Y 轴的值。/
transform-style:preserve-3d; / 表示所有子元素在3D空间中呈现。*/