CSS 3D翻转卡片动画

阳光穿透心脏的1/2处 2022-06-17 02:19 227阅读 0赞

原文链接： [http://caibaojian.com/3d-flip-card.html][http_caibaojian.com_3d-flip-card.html]

这个[CSS][]翻转卡片效果是在鼠标滑过上面的时候会有一个炫酷的旋转，显示下面的后面卡片，并且有发光的效果。下面分享一下这个[代码][Link 1]：

### [HTML][]代码： ###

<div class="flip">
 	<div class="flip-box">
 		<a href="http://caibaojian.com/" target="_blank" class="flip-item flip-item-front">
 			<img src="weibo.jpg" alt="">
 			前端开发博客
 		</a>
 
 		<a href="http://hao.caibaojian.com/" target="_blank" class="flip-item flip-item-back">
 			<div class="flip-item-bling"></div>
 			<img src="manong.jpg" alt="">
 			码农头条
 		</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 */
    }

**定义和用法**[·][http_caibaojian.com_3d-flip-card.html]

backface-visibility 属性定义当元素不面向屏幕时是否可见。

如果在旋转元素不希望看到其背面时，该属性很有用。

### [CSS3][css3] transform-style 属性 ###

使被转换的子元素保留其 3D 转换：

//code from http://caibaojian.com/3d-flip-card.html
    div
    {
    transform: rotateY(60deg);
    transform-style: preserve-3d;
    -webkit-transform: rotateY(60deg);	/* Safari 和 Chrome */
    -webkit-transform-style: preserve-3d;	/* Safari 和 Chrome */
    }

transform-style 属性规定如何在 3D 空间中呈现被嵌套的元素。

<table> 
 <tbody> 
 <tr> 
 <th>值</th> 
 <th>描述</th> 
 </tr> 
 <tr> 
 <td>flat</td> 
 <td>子元素将不保留其 3D 位置。</td> 
 </tr> 
 <tr> 
 <td>preserve-3d</td> 
 <td>子元素将保留其 3D 位置。</td> 
 </tr> 
 </tbody> 
</table>

### CSS3 transform 属性 ###

transform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。

<table> 
 <tbody> 
 <tr> 
 <td>none</td> 
 <td>定义不进行转换。</td> 
 </tr> 
 <tr> 
 <td>matrix(n,n,n,n,n,n)</td> 
 <td>定义 2D 转换，使用六个值的矩阵。</td> 
 </tr> 
 <tr> 
 <td>matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n)</td> 
 <td>定义 3D 转换，使用 16 个值的 4x4 矩阵。</td> 
 </tr> 
 <tr> 
 <td>translate(x,y)</td> 
 <td>定义 2D 转换。</td> 
 </tr> 
 <tr> 
 <td>translate3d(x,y,z)</td> 
 <td>定义 3D 转换。</td> 
 </tr> 
 <tr> 
 <td>translateX(x)</td> 
 <td>定义转换，只是用 X 轴的值。</td> 
 </tr> 
 <tr> 
 <td>translateY(y)</td> 
 <td>定义转换，只是用 Y 轴的值。</td> 
 </tr> 
 <tr> 
 <td>translateZ(z)</td> 
 <td>定义 3D 转换，只是用 Z 轴的值。</td> 
 </tr> 
 <tr> 
 <td>scale(x,y)</td> 
 <td>定义 2D 缩放转换。</td> 
 </tr> 
 <tr> 
 <td>scale3d(x,y,z)</td> 
 <td>定义 3D 缩放转换。</td> 
 </tr> 
 <tr> 
 <td>scaleX(x)</td> 
 <td>通过设置 X 轴的值来定义缩放转换。</td> 
 </tr> 
 <tr> 
 <td>scaleY(y)</td> 
 <td>通过设置 Y 轴的值来定义缩放转换。</td> 
 </tr> 
 <tr> 
 <td>scaleZ(z)</td> 
 <td>通过设置 Z 轴的值来定义 3D 缩放转换。</td> 
 </tr> 
 <tr> 
 <td>rotate(angle)</td> 
 <td>定义 2D 旋转，在参数中规定角度。</td> 
 </tr> 
 <tr> 
 <td>rotate3d(x,y,z,angle)</td> 
 <td>定义 3D 旋转。</td> 
 </tr> 
 <tr> 
 <td>rotateX(angle)</td> 
 <td>定义沿着 X 轴的 3D 旋转。</td> 
 </tr> 
 <tr> 
 <td>rotateY(angle)</td> 
 <td>定义沿着 Y 轴的 3D 旋转。</td> 
 </tr> 
 <tr> 
 <td>rotateZ(angle)</td> 
 <td>定义沿着 Z 轴的 3D 旋转。</td> 
 </tr> 
 <tr> 
 <td>skew(x-angle,y-angle)</td> 
 <td>定义沿着 X 和 Y 轴的 2D 倾斜转换。</td> 
 </tr> 
 <tr> 
 <td>skewX(angle)</td> 
 <td>定义沿着 X 轴的 2D 倾斜转换。</td> 
 </tr> 
 <tr> 
 <td>skewY(angle)</td> 
 <td>定义沿着 Y 轴的 2D 倾斜转换。</td> 
 </tr> 
 <tr> 
 <td>perspective(n)</td> 
 <td>为 3D 转换元素定义透视视图。</td> 
 </tr> 
 </tbody> 
</table>

### CSS3 perspective 属性 ###

设置元素被查看位置的视图：

div
    {
    perspective: 500;
    -webkit-perspective: 500; /* Safari 和 Chrome */
    }

perspective 属性定义 3D 元素距视图的距离，以像素计。该属性允许您改变 3D 元素查看 3D 元素的视图。

当为元素定义 perspective 属性时，其子元素会获得透视效果，而不是元素本身。

### 总结： ###

在使用CSS 3D变换的属性时，开启[GPU硬件加速][GPU]，`transform:translate3d(0,0,0);`，使用上面这个代码能提升性能。

要想更好的理解这个案例，需要你熟悉上面这几个属性的使用。以上CSS代码中没有加入相应的前缀，请使用[autoprefixer][]插件自行加入。

关于CSS 3D转换的更多属性介绍：[http://caibaojian.com/w3school/css3/css3\_3dtransform.asp.htm][http_caibaojian.com_w3school_css3_css3_3dtransform.asp.htm]

下面的表格列出了所有的转换属性：

<table> 
 <tbody> 
 <tr> 
 <th>属性</th> 
 <th>描述</th> 
 <th>CSS</th> 
 </tr> 
 <tr> 
 <td><a title="CSS3 transform 属性" href="http://caibaojian.com/w3school/cssref/pr_transform.asp.htm" rel="nofollow">transform</a></td> 
 <td>向元素应用 2D 或 3D 转换。</td> 
 <td>3</td> 
 </tr> 
 <tr> 
 <td><a title="CSS3 transform-origin 属性" href="http://caibaojian.com/w3school/cssref/pr_transform-origin.asp.htm" rel="nofollow">transform-origin</a></td> 
 <td>允许你改变被转换元素的位置。</td> 
 <td>3</td> 
 </tr> 
 <tr> 
 <td><a title="CSS3 transform-style 属性" href="http://caibaojian.com/w3school/cssref/pr_transform-style.asp.htm" rel="nofollow">transform-style</a></td> 
 <td>规定被嵌套元素如何在 3D 空间中显示。</td> 
 <td>3</td> 
 </tr> 
 <tr> 
 <td><a title="CSS3 perspective 属性" href="http://caibaojian.com/w3school/cssref/pr_perspective.asp.htm" rel="nofollow">perspective</a></td> 
 <td>规定 3D 元素的透视效果。</td> 
 <td>3</td> 
 </tr> 
 <tr> 
 <td><a title="CSS3 perspective-origin 属性" href="http://caibaojian.com/w3school/cssref/pr_perspective-origin.asp.htm" rel="nofollow">perspective-origin</a></td> 
 <td>规定 3D 元素的底部位置。</td> 
 <td>3</td> 
 </tr> 
 <tr> 
 <td><a title="CSS3 backface-visibility 属性" href="http://caibaojian.com/w3school/cssref/pr_backface-visibility.asp.htm" rel="nofollow">backface-visibility</a></td> 
 <td>定义元素在不面对屏幕时是否可见。</td> 
 <td>3</td> 
 </tr> 
 </tbody> 
</table>

来源： [前端开发博客][http_caibaojian.com_3d-flip-card.html]

[http_caibaojian.com_3d-flip-card.html]: http://caibaojian.com/3d-flip-card.html
[CSS]: http://caibaojian.com/css3/
[Link 1]: http://caibaojian.com/c/code
[HTML]: http://caibaojian.com/t/html
[css3]: http://caibaojian.com/t/css3
[GPU]: http://caibaojian.com/css-reflow-repaint.html#t8
[autoprefixer]: http://caibaojian.com/autoprefixer.html
[http_caibaojian.com_w3school_css3_css3_3dtransform.asp.htm]: http://caibaojian.com/w3school/css3/css3_3dtransform.asp.htm