CSS魔方

最新推荐文章于 2024-04-15 04:47:11 发布

弗兰克的天空

最新推荐文章于 2024-04-15 04:47:11 发布

阅读量270

点赞数

分类专栏：网站前端

本文链接：https://blog.csdn.net/frank_fong/article/details/79036495

版权

网站前端专栏收录该内容

75 篇文章 1 订阅

订阅专栏

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>魔方</title>
<style>
.cube {
	position: relative;
	margin: 100px auto;
	width: 120px;
	height: 120px;
	perspective: 2000px;  /*场景深度*/
	transform: rotateX(75deg) rotateZ(45deg); /*旋转*/
	transform-style: preserve-3d; /*3d模式*/
	transition: all 2s ease; /*过渡*/
}
.cube:hover {
	transform: rotateX(60deg) rotateZ(-120deg) rotateY(90deg);
}
.cube>div {
	position: absolute;
	width: 120px;
	height: 120px;
}
.cube>div>div {
	float: left;
	width: 38px;
	height: 38px;
	border: 1px solid #333;
}
.cube>div:nth-child(1) {	
	transform: translateZ(60px);
}
.cube>div:nth-child(1)>div {
	background-color: red;
}
.cube>div:nth-child(2) {	
	transform: translateZ(-60px);
}
.cube>div:nth-child(2)>div {
	background-color: orange;
}
.cube>div:nth-child(3) {	
	transform: rotateY(90deg) translateZ(-60px);
}
.cube>div:nth-child(3)>div {
	background-color: green;
}
.cube>div:nth-child(4) {	
	transform: rotateY(90deg) translateZ(60px);
}
.cube>div:nth-child(4)>div {
	background-color: blue;
}
.cube>div:nth-child(5) {
	
	transform: rotateX(90deg) translateZ(60px);
}
.cube>div:nth-child(5)>div {
	background-color: white;
}
.cube>div:nth-child(6 ) {	
	transform: rotateX(90deg) translateZ(-60px);
}
.cube>div:nth-child(6)>div {	
	background-color: yellow;
}
</style>
</head>

<body>
<div class="cube">
  <div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
  </div>
  <div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
  </div>
  <div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
  </div>
  <div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
  </div>
  <div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
  </div>
  <div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
  </div>
</div>
</body>
</html>

弗兰克的天空

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS魔方

魔方.cube { position: relative; margin: 100px auto; width: 120px; height: 120px; perspective: 2000px; /*场景深度*/ transform: rotateX(75deg) rotateZ(45deg); /*旋转*/ transform-style: preserve-3d; /*
复制链接

扫一扫