【HTML+CSS】做一个简易的立体小模型

学完css基础的朋友们赶紧给自己做个小玩具"奖励"一下自己吧

学习的过程中一定要记得多奖励自己

废话不多说直接撸代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			.boss{
				width: 200px;
				height: 200px;
				/* border: 1px solid #000; */
				margin: 200px auto;
				position: relative;
				transform-style: preserve-3d;
				transition: 6s linear;
			}
			.boss:hover{
				transform: rotate3d(1,1,1,360deg);
			}
			.boss div{
				width: 200px;
				height: 200px;
				position: absolute;
				left: 0;
				top: 0;
				font-size: 40px;
				text-align: center;
				line-height: 200px;
				font-weight: bold;
				color: #fff;
				opacity: 0.7;
			}
			.boss div:nth-child(1){
				background: cornflowerblue;
				transform: translateX(-100px) rotateY(-90deg);
			}
			.boss div:nth-child(2){
				background: green;
				transform: translateX(100px) rotateY(90deg);
			}
			.boss div:nth-child(3){
				background: purple;
				transform: translateY(-100px) rotateX(90deg);
			}
			.boss div:nth-child(4){
				background: yellow;
				transform: translateY(100px) rotateX(-90deg);
			}
			.boss div:nth-child(5){
				background: skyblue;
				transform: translateZ(-100px) rotateY(180deg);
			}
			.boss div:nth-child(6){
				background:red;
				transform: translateZ(100px);
			}
		</style>
	</head>
	<body>
		<div class="boss">
			<div>1</div>
			<div>2</div>
			<div>3</div>
			<div>4</div>
			<div>5</div>
			<div>6</div>
		</div>
	</body>
</html>

效果图