下面这张图片的X、Z、Y轴必须看懂,不然后续很难编写代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>正方体实现与循环旋转</title>
<style type="text/css">
html {
background: linear-gradient(#66FF99 0%,#00FFFF 80%); /* 背景色渐变 */
opacity: .8; /* 设置透明度 */
height: 100%;
}
.warp {
margin-top: 200px;
}
.cure {
width: 200px;
height: 200px;
position: relative; /*定位,使正方体六张图保持在一个水平面,父元素设置相对定位,设置定位必须设置宽高,不然为0*/
margin: auto;
transform-style: preserve-3d; /* 实现3d功能必用 */
animation: rotate 15s infinite; /*动画:动画名称(与下面@keyframes中名称一致) 动画执行时长 循环次数(这里设置无限)*/
}
@keyframes rotate{ /*启动动画*/
from{
transform: rotateX(0deg) rotateY(0deg); /**/
}
to{
transform: rotateX(360deg) rotateY(360deg);
}
}
.cure>div {
width: 100%;
height: 100%;
background: #333;
opacity: .9;
position: absolute; /*子元素依靠父元素设置绝对定位,同样必须设置宽高*/
text-align: center;
color: #fff;
line-height: 200px;
font-size: 50px;
}
/* 正方体实现 */
.div1 {
transform: translateZ(100px); /* 沿着Z轴向前100像素 */
}
.div2 {
transform: translateZ(-100px); /* 沿着Z轴向后100像素 */
}
.div3 {
transform: rotateY(90deg) translateZ(-100px); /* 沿着Y轴旋转90度(左侧面),在沿着Z轴向左平移100像素 */
}
.div4 {
transform: rotateY(90deg) translateZ(100px); /* 沿着Y轴旋转90度(右侧面),在沿着Z轴向右平移100像素 */
}
.div5 {
transform: rotateX(90deg) translateZ(100px); /* 沿着X轴旋转90度(顶层面),在沿着Z轴向上平移100像素 */
}
.div6 {
transform: rotateX(90deg) translateZ(-100px); /* 沿着X轴旋转90度(底层面),在沿着Z轴向下平移100像素 */
}
/* 鼠标经过cure时向外扩张100px,属性值依据上面正方体实现执行与编写*/
.cure:hover .div1 {
transform: translateZ(200px);
}
.cure:hover .div2 {
transform: translateZ(-200px);
}
.cure:hover .div3 {
transform: rotateY(90deg) translateZ(-200px);
}
.cure:hover .div4 {
transform: rotateY(90deg) translateZ(200px);
}
.cure:hover .div5 {
transform: rotateX(90deg) translateZ(200px);
}
.cure:hover .div6 {
transform: rotateX(90deg) translateZ(-200px);
}
</style>
</head>
<body>
<div class="warp">
<div class="cure">
<div class="div1">Front</div>
<div class="div2">Back</div>
<div class="div3">Left</div>
<div class="div4">Right</div>
<div class="div5">Top</div>
<div class="div6">Bottom</div>
</div>
</div>
</body>
</html>