CSS 画旋转的正立方体

最新推荐文章于 2024-04-01 01:28:13 发布

chenlunju

最新推荐文章于 2024-04-01 01:28:13 发布

阅读量272

点赞数

分类专栏： HTML CSS

本文链接：https://blog.csdn.net/chenlunju/article/details/85009089

版权

HTML 同时被 2 个专栏收录

9 篇文章 0 订阅

订阅专栏

CSS

7 篇文章 0 订阅

订阅专栏

图1：设置backface-visibility:visible 图2：设置backface-visibility:hidden

实际效果图如上图所示，两者的差别就是旋转时背面能见度属性差别。

visible——此关键字意味着背面可见，允许正面显示为镜像。

hidden——这个关键字意味着背面不可见。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>旋转的立方体</title>
	<link rel="stylesheet" href="cube.css">
</head>
<body>
	<div class="wrapper">
		<div class="left-box">
			<div class="mytitle">backface-visibility:visible</div>
			<div class="left-cube">
				<div class="plane-front">1</div>
				<div class="plane-back">3</div>
				<div class="plane-left">4</div>
				<div class="plane-right">2</div>
				<div class="plane-top">6</div>
				<div class="plane-bottom">5</div>
			</div>
		</div>
		
		<div class="right-box">
			<div class="mytitle">backface-visibility:hidden</div>
			<div class="right-cube hidden">
				<div class="plane-front">1</div>
				<div class="plane-back">3</div>
				<div class="plane-left">4</div>
				<div class="plane-right">2</div>
				<div class="plane-top">6</div>
				<div class="plane-bottom">5</div>
			</div>
		</div>
		
	</div>
</body>
</html>

html{
	background: linear-gradient(#9ed128 0%,#358b98 80%);
	height: 100%;
	opacity: 0.8;
}

.mytitle{
	margin-top: 50px;
	font-weight: bold;
	font-size: 40px;
	text-align: center;
}

.left-box, .right-box{
	position: absolute;
	height: 700px;
	width: 700px;
	perspective: 1000px;
	border: 1px solid black;
}

.left-box{
	left: 100px;
	top: 100px;
}

.right-box{
	right: 100px;
	top: 100px;
}

.hidden>div{
	backface-visibility:hidden;
}

.left-cube, .right-cube{
	height: 200px;
	width: 200px;
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	margin: auto;
	transform-style: preserve-3d;
	-webkit-animation: rotate 15s infinite;
	-o-animation: rotate 15s infinite;
	animation: rotate 15s infinite 2s;
}

@keyframes rotate{
	from{
		transform: rotateY(0deg) rotateX(0deg);
	}
	to{
		transform: rotateY(360deg) rotateX(360deg);
	}
}

.left-cube>div, .right-cube>div{
	height: 100%;
	width: 100%;
	opacity: 0.9;
	position: absolute;
	text-align: center;
	color: #fff;
	line-height: 200px;
	font-size: 130px;
}


.plane-front{
	background: red;
	transform: translateZ(100px);
}

.plane-back{
	background: blue;
	transform: rotateY(180deg) translateZ(100px);
}

.plane-left{
	background: pink;
	transform: rotateY(270deg) translateZ(100px);
}

.plane-right{
	background: orange;
	transform: rotateY(90deg) translateZ(100px);
}

.plane-top{
	background: gray;
	transform: rotateX(90deg) translateZ(100px);
}

.plane-bottom{
	background: green;
	transform: rotateX(270deg) translateZ(100px);
}

.left-cube:hover .plane-front, .right-cube:hover .plane-front{
	transform: translateZ(200px);
}

.left-cube:hover .plane-back, .right-cube:hover .plane-back{
	transform: rotateY(180deg) translateZ(200px);
}

.left-cube:hover .plane-left, .right-cube:hover .plane-left{
	transform:rotateY(270deg) translateZ(200px);
}
.left-cube:hover .plane-right, .right-cube:hover .plane-right{
	transform:rotateY(90deg) translateZ(200px);
}
.left-cube:hover .plane-top, .right-cube:hover .plane-top{
	transform:rotateX(90deg) translateZ(200px);
}
.left-cube:hover .plane-bottom, .right-cube:hover .plane-bottom{
	transform:rotateX(270deg) translateZ(200px);
}