css实现w3cschool广告轮播图

先来看下效果

css实现w3cschool广告轮播图_第1张图片

主要用了css3的3D转换和动画(transform,animation),这个轮播效果是由三个div通过transform达到折叠的效果组合而成的,然后给它们共同的父元素div一个旋转动画效果,就完成了这个轮播的效果,需要注意,父元素必须添加transform-style: preserve-3d;否则无法达到3D的效果,下面直接上代码(由于之前为子元素加了border,导致效果不是很好,已改正):





    
    HelloWorld
    



    

 

你可能感兴趣的:(CSS)