CSS实现旋转立方体

最新推荐文章于 2023-03-25 13:48:32 发布

小鑫-star

最新推荐文章于 2023-03-25 13:48:32 发布

阅读量626

点赞数 1

分类专栏： Css

本文链接：https://blog.csdn.net/qq_43390721/article/details/88557120

版权

Css 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
	div{
		width: 300px;height: 300px;margin: 300px auto;perspective: 1800px;
	}
	ul{
		text-align: center;list-style: none;line-height: 300px;position: relative;transform-style: preserve-3d;animation: mymove 2s linear infinite;transform-origin: center center 150px;
	}
	ul>li{
		font-size: 50px;position: absolute;
	}
		li:nth-child(1) {
			height: 300px;width:300px;background: pink;opacity: .5;
		}
		li:nth-child(2) {
			height: 300px;width:300px;background: green;opacity: .5;transform: translateY(300px) rotateX(90deg);transform-origin: top;
		}
		li:nth-child(3) {
			height: 300px;width:300px;background: yellow;opacity: .5;transform: translateX(-300px) rotateY(90deg); transform-origin: right;
		}
		li:nth-child(4) {
			height: 300px;width:300px;background: blue;opacity: .5;transform: translateY(-300px) rotateX(-90deg) ;transform-origin: bottom;
		}
		li:nth-child(5) {
			height: 300px;width:300px;background: red;opacity: .5;transform: translateX(300px) rotateY(-90deg);transform-origin: left;
		}
		li:nth-child(6) {
			height: 300px;width:300px;background: yellowgreen;opacity: .5;transform: translateZ(300px);
		}
		@keyframes mymove{
			from{
				transform: rotateY(0deg);
			}
			to{
				transform: rotateY(360deg);
			}
		}
	</style>
</head>
<body>
	<div>
		<ul>
			<li>1</li>
			<li>2</li>
			<li>3</li>
			<li>4</li>
			<li>5</li>
			<li>6</li>
		</ul>
	</div>
</body>
</html>

小鑫-star

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
CSS实现旋转立方体

&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Document&lt;/title&gt; &lt;style&gt; div{ width: 300px;height: 300px;margi
复制链接

扫一扫