演示：https://qdkfweb.cn/demo/2017/03/flip.html
这个CSS翻转卡片效果是在鼠标滑过上面的时候会有一个炫酷的旋转，显示下面的后面卡片，并且有发光的效果。下面分享一下这个代码：
HTML代码：
<div class="flip"> <div class="flip-box"> <a href="https://qdkfweb.cn/" target="_blank" class="flip-item flip-item-front"> <img src="weibo.jpg" alt=""> <span class="flip-item-text">前端开发博客</span> </a> <a href="https://toutiao.qdkfweb.cn/" target="_blank" class="flip-item flip-item-back"> <div class="flip-item-bling"></div> <img src="manong.jpg" alt=""> <span class="flip-item-text">码农头条</span> </a> </div> </div>
CSS代码：
.flip { transform:translate3d(0,0,0); margin:40px; } .flip-box { position:relative; width:110px; height:140px; overflow:hidden; } .flip-item { position:absolute; left:0; top:0; width:100%; height:100%; transition:all .5s ease-in-out; transform-style:preserve-3d; backface-visibility:hidden; border:1px solid #ddd; box-sizing:border-box; } .flip-item img { width:70px; height:70px; border-radius:100%; margin:32px auto; display:block; } .flip-item-text { position:absolute; bottom:8px; left:0; width:100%; text-align:center; color:#fff; } .flip-item-front { transform:rotateY(0deg); z-index:2; background:#fff; } .flip-item-back { transform:rotateY(180deg); z-index:1; background:#009fff; } .flip-item-back .flip-item-text { color:#fff; } .flip-box:hover .flip-item-front { z-index:1; transform:rotateY(180deg); } .flip-box:hover .flip-item-back { z-index:2; transform:rotateY(0deg); } .flip-item-bling { position:absolute; top:50%; left:50%; width:200px; height:200px; margin-top:-100px; margin-left:-100px; background:url(animation.png) center no-repeat; z-index:-1; } .flip-box:hover .flip-item-bling { transform:translate3d(0,0,0); animation:rotate infinite 10s linear; } @keyframes rotate { 0% { transform-origin:center; transform:rotate3d(0,0,1,0deg); } 100% { transform-origin:center; transform:rotate3d(0,0,1,360deg); } }
CSS3 backface-visibility 属性
隐藏被旋转的 div 元素的背面：
div
{
backface-visibility:hidden;
-webkit-backface-visibility:hidden; /* Chrome 和 Safari */
-moz-backface-visibility:hidden; /* Firefox */
-ms-backface-visibility:hidden; /* Internet Explorer */
}
定义和用法
backface-visibility 属性定义当元素不面向屏幕时是否可见。
如果在旋转元素不希望看到其背面时，该属性很有用。
CSS3 transform-style 属性
使被转换的子元素保留其 3D 转换：
div
{
transform: rotateY(60deg);
transform-style: preserve-3d;
-webkit-transform: rotateY(60deg); /* Safari 和 Chrome */
-webkit-transform-style: preserve-3d; /* Safari 和 Chrome */
}
transform-style 属性规定如何在 3D 空间中呈现被嵌套的元素。
| 值 | 描述 |
|---|---|
| flat | 子元素将不保留其 3D 位置。 |
| preserve-3d | 子元素将保留其 3D 位置。 |
CSS3 transform 属性
transform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。
| none | 定义不进行转换。 |
| matrix(n,n,n,n,n,n) | 定义 2D 转换，使用六个值的矩阵。 |
| matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n) | 定义 3D 转换，使用 16 个值的 4×4 矩阵。 |
| translate(x,y) | 定义 2D 转换。 |
| translate3d(x,y,z) | 定义 3D 转换。 |
| translateX(x) | 定义转换，只是用 X 轴的值。 |
| translateY(y) | 定义转换，只是用 Y 轴的值。 |
| translateZ(z) | 定义 3D 转换，只是用 Z 轴的值。 |
| scale(x,y) | 定义 2D 缩放转换。 |
| scale3d(x,y,z) | 定义 3D 缩放转换。 |
| scaleX(x) | 通过设置 X 轴的值来定义缩放转换。 |
| scaleY(y) | 通过设置 Y 轴的值来定义缩放转换。 |
| scaleZ(z) | 通过设置 Z 轴的值来定义 3D 缩放转换。 |
| rotate(angle) | 定义 2D 旋转，在参数中规定角度。 |
| rotate3d(x,y,z,angle) | 定义 3D 旋转。 |
| rotateX(angle) | 定义沿着 X 轴的 3D 旋转。 |
| rotateY(angle) | 定义沿着 Y 轴的 3D 旋转。 |
| rotateZ(angle) | 定义沿着 Z 轴的 3D 旋转。 |
| skew(x-angle,y-angle) | 定义沿着 X 和 Y 轴的 2D 倾斜转换。 |
| skewX(angle) | 定义沿着 X 轴的 2D 倾斜转换。 |
| skewY(angle) | 定义沿着 Y 轴的 2D 倾斜转换。 |
| perspective(n) | 为 3D 转换元素定义透视视图。 |
CSS3 perspective 属性
设置元素被查看位置的视图：
div
{
perspective: 500;
-webkit-perspective: 500; /* Safari 和 Chrome */
}
perspective 属性定义 3D 元素距视图的距离，以像素计。该属性允许您改变 3D 元素查看 3D 元素的视图。
当为元素定义 perspective 属性时，其子元素会获得透视效果，而不是元素本身。
总结：
在使用CSS 3D变换的属性时，开启GPU硬件加速，transform:translate3d(0,0,0);，使用上面这个代码能提升性能。
要想更好的理解这个案例，需要你熟悉上面这几个属性的使用。以上CSS代码中没有加入相应的前缀，请使用autoprefixer插件自行加入。
关于CSS 3D转换的更多属性介绍：https://qdkfweb.cn/w3school/css3/css3_3dtransform.asp.htm
下面的表格列出了所有的转换属性：
| 属性 | 描述 | CSS |
|---|---|---|
| transform | 向元素应用 2D 或 3D 转换。 | 3 |
| transform-origin | 允许你改变被转换元素的位置。 | 3 |
| transform-style | 规定被嵌套元素如何在 3D 空间中显示。 | 3 |
| perspective | 规定 3D 元素的透视效果。 | 3 |
| perspective-origin | 规定 3D 元素的底部位置。 | 3 |
| backface-visibility | 定义元素在不面对屏幕时是否可见。 | 3 |
