html实现3D骰子

最新推荐文章于 2022-07-05 00:03:50 发布

挚爱py

最新推荐文章于 2022-07-05 00:03:50 发布

阅读量8.4k

点赞数 1

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		*{
			margin: 0;
			padding: 0;
		}
		body{
			overflow: hidden;
		}
		.box{
			list-style: none;
			width: 300px;
			height: 300px;
			position: relative;
			margin: 100px auto;
			transform-style: preserve-3d;
			transform: rotateX(-180deg) rotateY(-180deg);
			animation: rotate 2s linear 0s infinite normal;
		}
		@keyframes rotate{
			0%{
				transform: rotateX(-180deg) rotateY(-180deg);
			}
			100%{
				transform: rotateX(180deg) rotateY(180deg);
			}
		}
		.box li{
			position: absolute;
			left: 0;
			top: 0;
			width: 300px;
			height: 300px;
			line-height: 300px;
			text-align: center;
			font-size: 40px;
			color: #ffffff;
		}
		.box li:nth-child(1){
			background: red;
			transform: translateZ(150px);
		}
		.box li:nth-child(2){
			background: blue;
			transform: translateZ(-150px);
		}
		.box li:nth-child(3){
			background: black;
			transform: translateX(-150px) rotateY(-90deg);
		}
		.box li:nth-child(4){
			background: green;
			transform: translateX(150px) rotateY(90deg);
		}
		.box li:nth-child(5){
			background: yellow;
			transform: translateY(-150px) rotateX(90deg);
		}
		.box li:nth-child(6){
			background: pink;
			transform: translateY(150px) rotateX(-90deg);
		}
	</style>
</head>
<body>
	<ul class="box">
		<li>1</li>
		<li>2</li>
		<li>3</li>
		<li>4</li>
		<li>5</li>
		<li>6</li>
	</ul>
</body>
</html>