CSS3 3D制作实战案例分析

                -webkit-transform:rotateX(180deg) rotateY(90deg) rotateZ(90deg);   

            }   

            50%{   

                -webkit-transform:rotateX(270deg) rotateY(180deg) rotateZ(180deg);   

            }   

            75%{   

                -webkit-transform:rotateX(360deg) rotateY(270deg) rotateZ(270deg);   

            }   

        }   

展示效果：

 三、CSS3 3D使用特效制作与分析
 
 1、模拟卡牌翻转效果
 
这个我就不多说怎样制作了，先上效果，图片是来源于蜗牛的，如有侵犯请告知

这个虽然是归类到3D的范围内，但是在使用的时候由于不需要产生平行四边形的变换效果(这个的具体效果详见博主的另外一篇博文)，所以不需要使用perspective这个属性，但是确实需要使用到CSS3 3D常见效果中的翻转属性(rotate[X,Y,Z]),这个的具体原理也是简单，但是在使用的时候有两点是需要注意的。
 
一）、因为旋转是相对于卡牌的整体的旋转，也就是两个面都要旋转，所以hover事件要相对于卡牌整体，如果是相对于某一个面的话，那么会出现一个面旋转，而另外一个面不旋转的现象
 
二）、在制作的过程中使用了一个比较少见的属性：backface-visibility，这个属性是为了见图片的背面设置为不可见，从而达到实现翻转的效果
 
具体代码见文章最后
 
2、CSS3 3D轮播
 
说到CSS3 3D轮播主要我们可以分成这样的三类，一类是自动播放的轮播图，另外一类是响应点击事件的轮播图，第三类是两者的结合，即自动播放又响应点击事件，这里我们主要讨论的是前两者，第三类比较复杂这里我们就不多做解释，以后有机会再来跟大家探讨探讨
 
2.1 自动轮播图
 
这个的原理我们已经在前面中多次提到了，但是各位要注意一个地方，在keyframes中设置如：
 
@keyframes test{
   o%,
   12.5%:{………………}
}

这样的一种形式可以实现轮播图的短暂停留。
 
好了看一下效果了：

2.2 CSS3触发轮播图
 
主要的原理是通过判断点击的次数，然后是给图片父类添加旋转的属性，这样这个功能就实现了，我们对上面的例子进行改进，效果如下所示 

（编辑：焦作站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!