用css实现一个硬币旋转的效果

[问答题]

用css实现一个硬币旋转的效果

查看答案及解析

xujunjie1234

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<style>
		.coin {
			width: 100px;
			height: 100px;
			margin: 100px;
			animation: rotateCoin 3s linear;
			animation-iteration-count: 3;
			background-color: goldenrod;
			border-radius: 50%;
		}

		.coin:hover {
			animation-play-state: paused;
		}


		@keyframes rotateCoin {
			0% {
				transform: rotateY(0deg);
			}

			100% {
				transform: rotateY(360deg);
			}
		}

	</style>
</head>
<body>
	<div class="coin"></div>
</body>
</html>

发表于 2020-04-27 11:37:16 回复(0)

MinJiea

设置硬币正面反面图片，设置transform-style为preserve-3D（），translateZ将正反面图片位置错开，keyframes中使用transform的rotateY（角度0deg）实现旋转动画，

发表于 2019-11-26 09:07:33 回复(0)

名字被占用的Aimee

.box{ width: 100px; height: 100px; transform-style: preserve-3d; position: relative; animation: spin 1s linear infinite; } .box>div{ width: 100%; height: 100%; border-radius: 50%; position:absolute; } .front{ background-color: #03a9f4; transform: translateZ(15px); } .back{ background-color: (2156)#f06292; transform: rotateY(-180deg); } @keyframes spin { 0%{ transform: rotateY(0deg); } 100%{ transform: rotateY(360deg); } }

编辑于 2020-03-11 15:28:22 回复(0)