<!doctype html> <html> <head> <meta charset="UTF-8"> <title>3D立方体</title> <style> .box{ width: 249px; height: 249px; border: 1px dashed #000; margin: 120px auto; border-radius: 250px; position: relative; /* 让子盒子保持3D效果 */ transform-style: preserve-3d; /* 父盒子变换 */ /* transform:rotateX(30deg) rotateY(-30deg); */ /* 动画*/ animation: gun 8s linear infinite; } /* 爱心 */ .box::before,.box::after{ content: ""; width: 50px; height: 80px; background: pink; position: absolute; border-radius: 50px 50px 0 0; top: 50%; left: 50%; } .box::before{ transform: rotate(-45deg); margin-left: -36px; margin-top: -40px; } .box::after{ transform: rotate(45deg); margin-left: -16px; margin-top: -40px; } @keyframes gun{ 0%{ transform:rotateX(0deg) rotateY(0deg) } 100%{ transform:rotateX(360deg) rotateY(360deg) } } /* 选中box下面的所有div */ .box > div{ width: 100%; height: 100%; text-align: center; line-height: 250px; font-size: 60px; position: absolute; color: #fff; } /* 左盒子 */ .left{ background-color: rgba(255,0,0,0.3); transform-origin: left; transform: rotateY(-90deg) translateX(-125px); } /* 右盒子 */ .right{ background-color:rgba(0,255,0,0.3); transform-origin: right; transform: rotateY(90deg)translateX(125px); } /* 前盒子 */ .forward{ background-color: rgba(0,0,255,0.3); transform: translateZ(125px); } /* 后盒子 */ .back{ background-color: rgba(0,125,125,0.3); transform: rotateY(-180deg) translateZ(125px); } /* 上盒子 */ .up{ background-color: rgba(125,125,0,0.3); transform: rotateX(90deg) translateZ(125px); } /* 下盒子 */ .down{ background-color: rgba(125,125,225,0.3); transform: rotateX(-90deg) translateZ(125px); } </style> </head> <body> <div> <div>上</div> <div>下</div> <div>左</div> <div>右</div> <div>前</div> <div>后</div> </div> </body> </html>
欢迎分享本文,转载请保留出处:前端ABC » CSS3 – 3D立方体