旋转立方体

最新推荐文章于 2022-09-08 21:23:02 发布

An_Adorable_Dali

最新推荐文章于 2022-09-08 21:23:02 发布

阅读量388

点赞数 2

本文链接：https://blog.csdn.net/weixin_45076969/article/details/104135146

版权

CSS 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

旋转立方体

效果

在这里插入图片描述

代码解析

index.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>立方体</title>
		<link rel="stylesheet" type="text/css" href="css/demo.css"/>
	</head>
	<body>
		<div id="box">
			<div id="box1">
				<div id="front">前</div>
				<div id="back">后</div>
				<div id="top">上</div>
				<div id="bottom">下</div>
				<div id="left">左</div>
				<div id="right">右</div>
				
				<i id="i-front"></i>
				<i id="i-back"></i>
				<i id="i-top"></i>
				<i id="i-bottom"></i>
				<i id="i-left"></i>
				<i id="i-right"></i>
			</div>
		</div>
	</body>
</html>

demo.css

body{
	background-color: #cb99c5;
}
#box{
	/* 实现垂直水平居中 start */
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	/* 实现垂直水平居中  end */
	perspective: 1000px;/*设置距离为1000来看立方体*/
}
#box1{
	width: 200px;
	height: 200px;
	transform-style: preserve-3d;/* 3D转换 */
	animation: dh 10s linear infinite;/* css3动画 */
	/* transform: rotateX(-20deg) rotateY(-40deg); */
}
#box #box1 div{
	position: absolute;
	width: 100%;
	height: 100%;
	text-align: center;
	line-height: 200px;
	color: white;
	font-size: 18px;
	transition: 0.6S;/* 过渡效果 */
}
#box #box1 i{
	position: absolute;
	top: 50%;
	left: 50%;
	margin-top:-50px;
	margin-left:-50px;
	width: 100px;
	height: 100px;
}
#box #box1 #front{
	background-color: #84fab080;
	transform: translateZ(100px);
}
#box #box1 #back{
	background-color:  #fa5a5a90;
	transform: translateZ(-100px) rotateY(-180deg) ;
}
 #box #box1 #top{
	 background-color:  #f0d26490;
	transform: rotateX(90deg) translateZ(100px);
}
#box #box1 #bottom{
	background-color:  #82c8a090;
	transform: rotateX(-90deg) translateZ(100px);
} 
 #box #box1 #left{
	background-color:  #7fccde90;
	transform: rotateY(-90deg) translateZ(100px) ;
}
#box #box1 #right{
	background-color:  #6698cb90;
	transform: rotateY(90deg) translateZ(100px);
}
/* 创建动画 */
@keyframes dh{
    0%{transform: rotateX(0deg) rotateZ(0deg) }
    100%{transform: rotateX(360deg) rotateZ(360deg) }
}


#box #box1:hover #front{
	background-color: #84fab080;
	transform: translateZ(200px);
}
#box #box1:hover #back{
	background-color: #84fab080;
	transform: translateZ(-200px) rotateY(-180deg) ;
}
 #box #box1:hover #top{
	background-color: #84fab080;
	transform: rotateX(90deg) translateZ(200px);
}
#box #box1:hover #bottom{
	background-color: #84fab080;
	transform: rotateX(-90deg) translateZ(200px);
} 
 #box #box1:hover #left{
	background-color: #84fab080;
	transform: rotateY(-90deg) translateZ(200px) ;
}
#box #box1:hover #right{
	background-color: #84fab080;
	transform: rotateY(90deg) translateZ(200px);
}

#box #box1 #i-front{
	background-color: #FFFFFF90;
	transform: translateZ(50px);
}
#box #box1 #i-back{
	background-color: #FFFFFF90;
	transform: translateZ(-50px) rotateY(-180deg) ;
}
 #box #box1 #i-top{
	background-color: #FFFFFF90;
	transform: rotateX(90deg) translateZ(50px);
}
#box #box1 #i-bottom{
	background-color: #FFFFFF90;
	transform: rotateX(-90deg) translateZ(50px);
} 
 #box #box1 #i-left{
	background-color: #FFFFFF90;
	transform: rotateY(-90deg) translateZ(50px) ;
}
#box #box1 #i-right{
	background-color: #FFFFFF90;
	transform: rotateY(90deg) translateZ(50px);
}