你的位置:首页 > 软件开发 > 网页设计 > CSS3D效果

CSS3D效果

发布时间:2016-05-19 20:00:04
效果如本博客中右边呢个浅色框框,来自webpack首页(IE绕路0_0)github地址:http://wjf444128852.github.io/demo02/css3/css3d/思路:1、关键是父元素ul的这2个属性 a:transform-style: prese ...

效果如本博客中右边呢个浅色框框,来自webpack首页(IE绕路0_0)

github地址:http://wjf444128852.github.io/demo02/css3/css3d/

思路:

1、关键是父元素ul的这2个属性

  a:transform-style: preserve-3d; 

  b:transform: rotateX(-33.5deg) rotateY(45deg);

让ul先有点偏移旋转的效果!

2、分别让每个li相对于ul前后左右上下位移一定距离是li宽度的一半,6个面上的li的背景色是从中间向四周的渐变色

3、最下面的li当作阴影,需要特殊处理

4、定义动画帧让ul执行注意animation的参数和兼容性

/*animation: name duration timing-function delay iteration-count direction;*/

原标题:CSS3D效果

关键词:CSS

CSS
*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。