css3 制作立方体

最新推荐文章于 2023-03-13 22:43:54 发布

高菊红

最新推荐文章于 2023-03-13 22:43:54 发布

阅读量294

点赞数

分类专栏： CSS3

本文链接：https://blog.csdn.net/gaojuhong/article/details/79400861

版权

CSS3 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>css3制作立方体</title>
                <style type="text/css" media="screen">
			*{margin:0;padding:0;}
			body{width:100%;height:100%;background-color:#333;opacity:0.8;}
			.wrap{height:400px;width:400px;margin:100px auto;border:4px solid #F7B236;perspective: 1500px;}
			.cude{position:relative;width:200px;height:200px;margin:100px;list-style:none;transform-style: preserve-3d;animation: move 1.5s infinite linear;transform-origin: center center 100px;}
			.cude li{position:absolute;width:200px;height:200px;font-size:50px;color:#fff;text-align:center;line-height:200px;}
			.cude li:nth-of-type(1){background-color:#8E1D41;opacity:0.4;}
			.cude li:nth-of-type(2){background-color:#248888;opacity:0.4;transform: translateX(200px) rotateY(-90deg);transform-origin: left;}
			.cude li:nth-of-type(3){background-color:#F5841A;opacity:0.4;transform: translateX(-200px) rotateY(90deg);transform-origin:right;}
			.cude li:nth-of-type(4){background-color:#D1F386;opacity:0.4;transform:translateY(-200px) rotateX(-90deg);transform-origin:bottom;}
			.cude li:nth-of-type(5){background-color:#01AAC1;opacity:0.4;transform:translateY(200px) rotateX(90deg);transform-origin: top;}
			.cude li:nth-of-type(6){background-color:#FF007B;opacity:0.4;transform:translateZ(200px);}
			@keyframes move{
				0% {transform: rotateY(0) rotateX(0deg);}
				25% {transform: rotateY(90deg) rotateX(90deg);}
				50% {transform: rotateY(180deg) rotateX(180deg);}
				75% {transform: rotateY(270deg) rotateX(270deg);}
				100% {transform: rotateY(360deg) rotateX(360deg); }
			}
		</style>
	</head>
	<body>
	    <div class="wrap">
		    <ul class="cude">
			    <li>1</li>
			    <li>2</li>
			    <li>3</li>
			    <li>4</li>
			    <li>5</li>
			    <li>6</li>
		    </ul>
	    </div>	
	</body>
</html>