html5旋转立方体

最新推荐文章于 2021-06-23 08:29:49 发布

中原猪精

最新推荐文章于 2021-06-23 08:29:49 发布

阅读量232

点赞数

分类专栏： HTML5放松小案列~ 文章标签： html5 css

本文链接：https://blog.csdn.net/qq_42257997/article/details/106672749

版权

HTML5放松小案列~ 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

演示：

代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			*{margin: 0;padding: 0;}
			body{
				background: black;
			}
			.box{width: 400px;height: 400px;margin: 150px auto;perspective: 1200px;}/*景深*/
			.box ul{width: 300px;height: 300px;margin: 50px auto;position: relative; animation: move 2s infinite linear; transform-origin: center center 150px;  transform-style: preserve-3d;}/*3d场景*/
			.box ul li{width: 300px;height: 300px;list-style: none;font-size: 100px; color: white;text-align: center;line-height: 300px;position: absolute;}
			.box ul li:nth-of-type(1){background: red;opacity: 0.4;}
			/* 向右平移300px，绕y轴旋转-90度*/
			.box ul li:nth-of-type(2){background: orange;opacity: 0.4;transform: translateX(300px) rotateY(-90deg);transform-origin: left;}
			/* 向左平移300px，绕y轴旋转90度*/
			.box ul li:nth-of-type(3){background: yellow;opacity: 0.4;transform: translateX(-300px) rotateY(90deg);transform-origin: right;}
			/* 向下平移300px，绕x轴旋转-90度*/
			.box ul li:nth-of-type(4){background: green;opacity: 0.4;transform: translateY(300px) rotateX(90deg);transform-origin: top;}
			/* 向上平移300px，绕x轴旋转90度*/
			.box ul li:nth-of-type(5){background: blue;opacity: 0.4;transform: translateY(-300px) rotateX(-90deg);transform-origin: bottom;}
			/* 向前平移300px */
			.box ul li:nth-of-type(6){background: purple;opacity: 0.4;transform: translateZ(300px);}
			
			/* 动画 */
			@keyframes move{
				from{transform: rotateY(0deg);}
				to{transform: rotateY(360deg);}
			}
		</style>
	</head>
	<body>
		<div class="box">
			<ul>
				<li>1</li>
				<li>2</li>
				<li>3</li>
				<li>4</li>
				<li>5</li>
				<li>6</li>
			</ul>
		</div>
	</body>
</html>

中原猪精

关注

0
点赞
踩
0

收藏

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

演示：代码：<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style> *{margin: 0;padding: 0;} body{ background: black; } .box{width: 400px;height: 400px;margin: 150px aut
复制链接

扫一扫

专栏目录