Duang duang duang CSS3实现3D翻转特效

ohnoma

随着浏览器技术的进步，web前端CSS动画技术已经不是只那些简单的淡入淡出效果或幻灯片效果，它们能做很多更强大的事情。今天，甲骨文OAEC将要教大家用CSS3实现3D翻转特效。

新建只有一个div的页面，给div加上简单的样式

然后在给div加上动画的过渡效果（transition: all 500ms ease;）

加上这个后，所有属性（all）都会有过渡效果，及500ms内，ease的过渡

又因为翻转需要3d效果，所以要加上 transform-style: preserve-3d;

preserve-3d的意思是‘子元素将保留其 3D 位置’

然后利用伪类after，加上翻转的另一面。

现在看到的效果是上下两个div，接下要做的就是让上面那个在初始状态水品翻转90度

transform: rotateX(90deg);

当鼠标移到div上时，触发翻转效果

#d1:hover {

           transform: rotateX(-90deg);

       }

当鼠标触发hover时，会发现翻转有点奇怪，两块div中有很大的空隙

需要加上transform-origin属性

transform-origin是变形原点，也就是该元素围绕着那个点变形或旋转，该属性只有在设置了transform属性的时候起作用

left bottom的意思就是x轴最左，y轴最下

加上之后就能看到正常的翻转了。

懂了吗？不懂的话可以看我们的web前端免费视频课程，地址：

http://www.chuanke.com/6764109-178314.html

或者https://ke.qq.com/course/140445#term_id=100158358

也可以到百度传课和腾讯课堂搜索海文IT教育，观看更多免费视频

更多精彩课程，尽在上海海文信息技术有限公司，http://www.oracleoaec.net/。