3d图片轮播--原理到实现

计划将现代网站上的特效实现一遍，不使用任何框架，如bootstrap之类的，框架天天不同，但底层是不会变化太大的。

3d图片轮播主要技术点为：

一、理解好3维坐标轴，可参考https://www.w3.org/Talks/2012/0416-CSS-WWW2012/Demos/transforms/demo-rotate3d.html；

二、理解和正确使用css3中的rotate和translate的3D属性，注意转动时，坐标轴发生的变化；

三、高中三维几何知识；

四、要设置舞台，可用DIV来设置，为这舞台设置perspective为图片总宽度，要不看不到效果；

五、图片全设置为绝对位置，若是相对，则出现DNA螺旋纹，CSS的BOX概念。

动画描述：

一、点击左按钮，六张图片顺时针转60度，当转完一圈时不能再转；

二、点击右按钮，六张图片逆时针转60度，当转完一圈时不能再转；

三、从左开始；

预览

点击打开链接

效果

代码如下：

	
	








    
   
  
  
  





	left
	right