H5+C3实现扭转木马相册-

这次给大家带来H5+C3实现扭转木马相册，H5+C3实现扭转木马相册的注意事项是什么，下面就是实战案例，一起来看一下。 这次给大家带来H5+C3实现扭转木马相册，H5+C3实现扭转木马相册的注意事项是什么，下面就是实战案例，一起来看一下。

结果图：嘿嘿，我把大学结业时的一些相片，做成扭转木马，绕着我大文理扭转，不忘母校的培养之恩~

1、perspective

perspective属性包含两个属性：none和拥有单位的长度值。

其中perspective属性的默许值为none，表示无穷的角度来看3D物体，但看上去是平的。另一个值承受一个长度单位大于0的值。并且其单位不克不及为百分比值。值越大，角度涌现的越远，从而新建一个相当低的强度和非常小的3D空间变化。反之，此值越小，角度涌现的越近，从而新建一个高强度的角度和一个大型3D变化。简略一点说：当perspective设定length时，要是越小则表示3D结果越显明，你的眼睛就越挨近3D物体，反之则反之。

2、transform: translateZ(length)

假如设定了perspective：300px时，设定translateZ的值越小则子元素大小越小，当设定值接近300px时，则宛然此元素在眼前，当超过300px今后，则之前抵达你视野的背面，该元素就不成见了。

上例的中心：

1、第一所有的图片的容器position:absolute，叠加在一起，然后一次设定rotateY离别为40*i ，i= 0 , 1, 2...9 ；所有图片会订交成一个相似花的外形

2、然后为每个图片的容器设定translateZ，所有图片会从对应的角度向外挪移，扩展成一个大圆，即上图结果。

html:

  
  
  
      
      
      
    
    
    



    

    
打赏
    

    

    	
        
    	

    		
感谢您的支持，我会继续努力的!
    	
    	

    		
    	
    		
扫码打赏，你说多少就多少
    	

    		

	    		
	    		
    		
    		

	    		
	    		
    		
    	
    	

    		
打开支付宝扫一扫，即可进行扫码打赏哦
    		
百分百源码网 建议打赏1～10元，土豪随意，感谢您的阅读！