正方体实现与循环旋转,如有不懂,欢迎提问,我是萌新,大神勿喷~
下面这张图片的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>