css3 旋转正方体特效实现

实现效果:

css3 旋转正方体特效实现_第1张图片

完整实现代码



	
		
		旋转立方体
		
	
	
		

总结

该动画效果主要用到一下几种动画效果:

1、translateX(x) 定义转换,只是用 X 轴的值。
translateY(y) 定义转换,只是用 Y 轴的值
translateZ(z) 定义 3D 转换,只是用 Z 轴的值。

2、rotateX(angle) 定义沿着 X 轴的 3D 旋转。
rotateX(angle) 定义沿着 X 轴的 3D 旋转。
rotateZ(angle) 定义沿着 Z 轴的 3D 旋转。

3、transform-style: preserve-3d; //开启3d动画

4、animation: move 5s infinite linear; //设置动画 分别 对应 动画方法 持续时间 重复播放 过渡动画的方式

你可能感兴趣的:(css3动画特效学习,web学习进阶之旅)