原生js实现 正方体旋转

使用CSS3新特性实现：

　　

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<link rel="stylesheet" type="text/css" href="gong.css" />
	<title>魔方</title>
	<style type="text/css">
		.box {
			display: block;
			width: 200px;
			height: 200px;
			margin: 100px auto;
			position: relative;
			transform-style: preserve-3d;
		}
		.box:hover {
			transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg);
			transition: 10s;
		}
		li {
			list-style: none;
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			opacity: .3;
		}
		li:nth-child(1) {
			transform: translateZ(-100px);
			background: paleturquoise;
		}
		li:nth-child(2) {
			transform: translateZ(100px);
			background: palegoldenrod;
		}
		li:nth-child(3) {
			background: #00AAEE;
			transform: translateX(100px) rotateY(90deg);
		}
		li:nth-child(4) {
			background: black;
			transform: translateX(-100px) rotateY(90deg);
		}
		li:nth-child(5) {
			background: blueviolet;
			transform: translateY(100px) rotateX(90deg);
		}
		li:nth-child(6) {
			background: palevioletred;
			transform: translateY(-100px) rotateX(90deg);
		}
	</style>
</head>
<body>
	<ul class="box">
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
	</ul>
</body>
</html>

　　

posted @ 2020-10-21 18:38  胡炖鱼  阅读(1065)  评论(0)  编辑  收藏  举报