导读 摘要 今天小编跟大家讲解下有关css3动画之两面翻转的盒子 ，相信小伙伴们对这个话题应该有所关注吧，小编也收集到了有关css3动画之两面翻...
摘要 今天小编跟大家讲解下有关css3动画之两面翻转的盒子 ，相信小伙伴们对这个话题应该有所关注吧，小编也收集到了有关css3动画之两面翻转的盒
今天小编跟大家讲解下有关css3动画之两面翻转的盒子 ，相信小伙伴们对这个话题应该有所关注吧，小编也收集到了有关css3动画之两面翻转的盒子 的相关资料，希望小伙伴们看了有所帮助。
利用伪元素before、after，只创建一个div<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> /*先清掉默认的样式*/ body { margin: 0; padding: 0; background-color: bisque; } /*给创建的div设置宽高和加上3D效果，且加上定位，方便后期的动画操作*/ .box { width: 300px; height: 300px; margin: 100px auto; position: relative; transform-style: preserve-3d; transition: all 5s; } /*给伪元素before和after设置宽高，以及定位， *此处用上下左右都为0的方法，使得before和after两个盒子紧贴父元素，达到这两个盒子与父盒子同款同高 *也可以采用width=100% height=100%的方法 */ .box::before,.box::after { content: ''; display: block; position: absolute; left: 0; right: 0; bottom: 0; top: 0; } .box::before { background: url("images/bg.png") right bottom;/*这里是设置背景图*/ transform: translateZ(0px);/*利用伪元素的话，这里就必须要加上，但是根据浏览器的不同，这里给的值也就不同*/ } .box::after { background: url("images/bg.png") left bottom; transform: translateZ(0px);/*利用伪元素的话，这里就必须要加上，但是根据浏览器的不同，这里给的值也就不同*/ } .box:hover { transform: rotateY(180deg); } </style></head><body><div class="box"></div></body></html>进一步优化——不采用伪元素<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> body { margin: 0; padding: 0; background-color: salmon; } div { width: 224px; height: 224px; position: relative; } img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; transition: all 1s; } img:last-child { backface-visibility: hidden; } div:hover img { transform: rotateY(180deg); } </style></head><body><div> <img src="http://www.aidi.net.cn/article/detial/5725/images/hou.svg" alt=""> <img src="http://www.aidi.net.cn/article/detial/5725/images/qian.svg" alt=""></div></body></html>
一个盒子里面装两个同宽高的盒子，利用backface-visibility设置元素背面是否可见的属性，达到两面翻转的效果
来源：爱蒂网
