CSS 3D翻转卡片动画

文章目录

animate-box

演示:http://caibaojian.com/demo/2017/03/flip.html

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

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="">
			<span class="flip-item-text">前端开发博客</span>
		</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="">
			<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 个值的 4x4 矩阵。
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转换的更多属性介绍:http://caibaojian.com/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

「五年博客,如果觉得我的文章对您有用,请帮助本站成长」

订阅周报 关注微博

原创文章:CSS 3D翻转卡片动画 ,未经许可,禁止转载,©版权所有
原文出处:前端开发博客 (http://caibaojian.com/3d-flip-card.html)

发表评论

请登录后发表评论: