近期学习 c3, 了解到两面翻转的盒子的两种制作方式:
利用伪元素 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="images/hou.svg" alt="">
- <img src="images/qian.svg" alt="">
- </div>
- </body>
- </HTML>
一个盒子里面装两个同宽高的盒子, 利用 backface-visibility 设置元素背面是否可见的属性, 达到两面翻转的效果
来源: http://www.jianshu.com/p/e94b3dc0b66f