css实现方块立体旋转效果

效果预览：
http://wikl.site/show_file/3d.html
html代码：

<html> <head> <meta charset="utf-8"> <title>3d</title> 
</head>
<body>
	<div class="cube">
		//把这里的文件替换为自己的图片即可
		<div class="box1">
			<img src="./1.png">
		</div>
		
		<div class="box2">
			<img src="./2.png">
		</div>
		
		<div class="box3">
			<img src="./3.png">
		</div>
		
		<div class="box4">
			<img src="./4.png">
		</div>
		
		<div class="box5">
			<img src="./5.png">
		</div>
		
		<div class="box6">
			<img src="./6.png">
		</div>
	</div>
</body>

css代码：
html { perspective: 800px; } .cube{ width: 200px; height: 200px; /* background-color: #bfa; */ margin: 100px auto; transform-style: preserve-3d; /* transform: rotateX(45deg) rotateZ(45deg); */ animation: rotate 20s infinite linear; } .cube>div { width: 200px; height: 200px; opacity: 0.8; position: absolute; } img{ vertical-align: top; width: 200px; height: 200px; } .box1{ transform: rotateY(90deg) translateZ(100px); } .box2 { transform: rotateY(-90deg) translateZ(100px); } .box3 { transform: rotateX(90deg) translateZ(100px); } .box4 { transform: rotateX(-90deg) translateZ(100px); } .box5 { transform:rotateY(180deg) translateZ(100px); } .box6 { transform: rotateY(0deg) translateZ(100px); } @keyframes rotate{ from{ transform: rotateX(0) rotateZ(0); } to{ transform: rotateX(1turn) rotateZ(1turn); } }

posted @ 2020-11-04 20:17  7wikl  阅读(259)  评论(0)    收藏  举报