纯 CSS 实现硬币旋转效果

最新推荐文章于 2024-03-01 09:44:15 发布

落晴

最新推荐文章于 2024-03-01 09:44:15 发布

阅读量829

点赞数 4

分类专栏： css 前端

本文链接：https://blog.csdn.net/ColorfulSeKaI/article/details/113783274

版权

CSS 3D变换动画关键帧硬币旋转

关键词由CSDN通过智能技术生成

前端同时被 2 个专栏收录

4 篇文章 0 订阅

订阅专栏

css

1 篇文章 0 订阅

订阅专栏

纯 CSS 实现硬币旋转效果

由于代码不多，实现不难（~~博主比较懒~~），就不详细解释了，有不懂的地方可以在下方留言，下面直接上代码：

<!DOCTYPE html>
<html lang="zh-CN">

<head>
	<title>Blank Page for Rich Text Editing</title>
	<style>
		html,
		body {
			margin: 0;
			padding: 0;
			width: 100%;
			height: 100%;
		}

		div {
			width: 100px;
			height: 100px;
			position: absolute;
			top: 0;
			right: 0;
			bottom: 0;
			left: 0;
			margin: auto;
			border-radius: 50%;
		}

		#front {
			background-color: #ccc;
			font-size: 3em;
			text-align: center;
			line-height: 100px;
			animation: spin 3s linear infinite;
		}

		#end {
			background-color: #ccc;
			font-size: 3em;
			text-align: center;
			line-height: 100px;
			animation: spin-reverse 3s linear infinite;
		}

		@keyframes spin {
			0% {
				transform: rotateY(0);
				z-index: 0;
			}

			50% {
				transform: rotateY(180deg);
				z-index: -1;
			}

			100% {
				transform: rotateY(360deg);
				z-index: 0;
			}
		}

		@keyframes spin-reverse {
			0% {
				transform: rotateY(-180deg);
				z-index: -1;
			}

			50% {
				transform: rotateY(0);
				z-index: 0;
			}

			100% {
				transform: rotateY(180deg);
				z-index: -1;
			}
		}
	</style>
</head>

<body>
	<div id="front">
		1
	</div>
	<div id="end">
		背面
	</div>
</body>

</html>