我的第一个博客 | 易学教程

通过CSS制作一个3d的立方体

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>CSS3制作3D立方体</title>
<style>
* {
	margin: 0;
	padding: 0;
}

body {
	width:500px;
	height:500px;
	perspective: 1500px;
	margin: 200px auto;
	border:1px solid pink;
}

.warp {
	width: 500px;
	height: 500px;
	margin: 100px auto;	
	position: relative;
	transform-style: preserve-3d;
	transform: rotateX(45deg) rotateY(45deg);
	height: 200px;
	border: 2px solid #ccc;
	text-align: center;
	animation: play 5s linear infinite;
}

.box {
	width: 200px;
	line-height: 200px;
	font-size: 150px;
	font-weight: bold;
	color: #fff;
	position: absolute;
	top: 150px;
	left: 150px;
}

.box1 {
	background: rgba(135,135,135,.3);
	transform: rotateY(90deg) translateZ(100px);
}

.box2 {
	background: rgba(135,0,255,.3);
	transform: rotateY(90deg) translateZ(-100px);
}

.box3 {
	background: rgba(255,125,125,.3);
	transform: rotateX(90deg) translateZ(-100px);
}

.box4 {
	background: rgba(125,255,125,.3);
	transform: rotateX(90deg) translateZ(100px);
}

.box5 {
	background: rgba(30,150,189,.3);
	transform: translateZ(100px);
}

.box6 {
	background: rgba(169,150,189,.3);
	transform: translateZ(-100px);
}

@keyframes play {
	from{ transform: rotateX(0) rotateY(0) rotateZ(0);}
	to {transform: rotateX(360deg) rotateY(180deg) rotateZ(90deg);}
}
</style>
</head>
<body>
<div class="warp">
	<div class="box box1">1</div>
    <div class="box box2">2</div>
    <div class="box box3">3</div>
    <div class="box box4">4</div>
    <div class="box box5">5</div>
    <div class="box box6">6</div>
</div>
<script>
</script>
</body>
</html>

来源：CSDN

作者：qq_40103002

链接：https://blog.csdn.net/qq_40103002/article/details/103246632

标签