旋转立方体的形成

发布于：2023-01-17 ⋅ 阅读:(127) ⋅ 点赞:(0)

<style>
	html {
	perspective: 1000px;
	}

	.wrap {
	width: 300px;
	height: 300px;
	margin: 200px auto;
	position: relative;
	transform-style: preserve-3d;
	animation: six 5s linear infinite;
	}

	.wrap div {
	width: 300px;
	height: 300px;
	position: absolute;
	opacity: .5;
	transition: 1s;
	}

	.wrap div:nth-child(1) {
	transform: rotateY(-90deg) translateZ(150px);
	background-color: red;
	}

	.wrap div:nth-child(2) {
	transform: rotateY(90deg) translateZ(150px);
	background-color: orange;
	}

	.wrap div:nth-child(3) {
	transform: rotateY(180deg) translateZ(150px);
	background-color: yellow;
	}

	.wrap div:nth-child(4) {
	transform: rotateX(-90deg) translateZ(150px);
	background-color: green;
	}

	.wrap div:nth-child(5) {
	transform: rotateX(90deg) translateZ(150px);
	background-color: cyan;
	}

	.wrap div:nth-child(6) {
	transform: translateZ(150px);
	background-color: blue;
	}

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

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

	.wrap:hover div:nth-child(1) {
	transform: rotateY(-90deg) translateZ(300px);
	}

	.wrap:hover div:nth-child(2) {
	transform: rotateY(90deg) translateZ(300px);
	}

	.wrap:hover div:nth-child(3) {
	transform: rotateY(180deg) translateZ(300px);
	}

	.wrap:hover div:nth-child(4) {
	transform: rotateX(-90deg) translateZ(300px);
	}

	.wrap:hover div:nth-child(5) {
	transform: rotateX(90deg) translateZ(300px);
	}

	.wrap:hover div:nth-child(6) {
	transform: translateZ(300px);
	}
	</style>
	</head>

	<body>
	<div class="wrap">
	<div></div>
	<div></div>
	<div></div>
	<div></div>
	<div></div>
	<div></div>
	</div>

	</body>

本文含有隐藏内容，请开通VIP 后查看