搜索到
2
篇与
立方体
的结果
-
html5+css3绘制嵌套展开旋转立方体 html5+css3绘制嵌套展开旋转立方体{anote icon="fa-arrow-circle-right" href="http://www.000081.xyz/index.php/28-1.html" type="secondary" content="预览"/}<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>嵌套展开旋转立方体</title> <style> * { margin: 0; padding: 0; box-sizing: border-box; border: 0; } .warp { width: 200px; height: 200px; left: 0; right: 0; bottom: 0; top: 0; margin: auto; position: absolute; transform: rotate3d(1, 1, 0, -30deg); transform-style: preserve-3d; animation: donghua 5s 0.2s linear infinite; /* 旋转动画 */ } /* 旋转动画 */ @keyframes donghua { 0% { transform: rotateY(0) rotateX(30deg); } 100% { transform: rotateY(360deg) rotateX(30deg); } } .warp1 { width: 100px; height: 100px; left: 0; right: 0; bottom: 0; top: 0; margin: auto; position: absolute; transform: rotate3d(1, 1, 0, 0); transform-style: preserve-3d; } .warp .box { width: 200px; height: 200px; font-size: 250px; text-align: center; position: absolute; line-height: 200px; } .warp1 .box { width: 100px; height: 100px; font-size: 125px; text-align: center; position: absolute; line-height: 100px; } .warp .box:nth-child(1) { background: rgba(255, 0, 0, 0.6); transform: translateZ(100px); } .warp .box:nth-child(2) { background: rgba(0, 255, 0, 0.6); transform: translateZ(-100px) rotateY(180deg); } .warp .box:nth-child(3) { background: rgba(0, 0, 255, 0.6); transform: translateX(-100px) rotateY(-90deg); } .warp .box:nth-child(4) { background: rgba(255, 255, 0, 0.6); transform: translateX(100px) rotateY(90deg); } .warp .box:nth-child(5) { background: rgba(255, 100, 100, 0.6); transform: translateY(-100px) rotateX(90deg); } .warp .box:nth-child(6) { background: rgba(255, 0, 255, 0.6); transform: translateY(100px) rotateX(-90deg); } .warp1 .box:nth-child(1) { background: rgba(220, 20, 60, 1); transform: translateZ(50px); } .warp1 .box:nth-child(2) { background: rgba(220, 20, 60, 1); transform: translateZ(-50px) rotateY(180deg); } .warp1 .box:nth-child(3) { background: rgba(220, 20, 60, 1); transform: translateX(-50px) rotateY(-90deg); } .warp1 .box:nth-child(4) { background: rgba(220, 20, 60, 1); transform: translateX(50px) rotateY(90deg); } .warp1 .box:nth-child(5) { background: rgba(220, 20, 60, 1); transform: translateY(-50px) rotateX(90deg); } .warp1 .box:nth-child(6) { background: rgba(220, 20, 60, 1); transform: translateY(50px) rotateX(-90deg); } .warp:hover > div:nth-child(1) { animation: donghua1 5s linear infinite; } .warp:hover > div:nth-child(2) { animation: donghua2 5s linear infinite; } .warp:hover > div:nth-child(3) { animation: donghua3 5s linear infinite; } .warp:hover > div:nth-child(4) { animation: donghua4 5s linear infinite; } .warp:hover > div:nth-child(5) { animation: donghua5 5s linear infinite; } .warp:hover > div:nth-child(6) { animation: donghua6 5s linear infinite; } @keyframes donghua1 { 0% { transform: rotateZ(0) translateZ(200px); } 100% { transform: rotateZ(360deg) translateZ(200px); } } @keyframes donghua2 { 0% { transform: rotateZ(0) translateZ(-200px) rotateY(180deg); } 100% { transform: rotateZ(360deg) translateZ(-200px) rotateY(180deg); } } @keyframes donghua3 { 0% { transform: rotateX(0) translateX(-200px) rotateY(-90deg); } 100% { transform: rotateX(360deg) translateX(-200px) rotateY(-90deg); } } @keyframes donghua4 { 0% { transform: rotateX(0) translateX(200px) rotateY(90deg); } 100% { transform: rotateX(360deg) translateX(200px) rotateY(90deg); } } @keyframes donghua5 { 0% { transform: rotateY(0) translateY(-200px) rotateX(90deg); } 100% { transform: rotateY(360deg) translateY(-200px) rotateX(90deg); } } @keyframes donghua6 { 0% { transform: rotateY(0) translateY(200px) rotateX(-90deg); } 100% { transform: rotateY(360deg) translateY(200px) rotateX(-90deg); } } </style> </head> <body> <div class="warp"> <div class="box">⚀</div> <div class="box">⚁</div> <div class="box">⚂</div> <div class="box">⚃</div> <div class="box">⚄</div> <div class="box">⚅</div> <div class="warp1"> <div class="box">☯</div> <div class="box">☯</div> <div class="box">☯</div> <div class="box">☯</div> <div class="box">☯</div> <div class="box">☯</div> </div> </div> </body> </html> -
html5+css3绘制旋转立方体 html5+css3绘制旋转立方体{anote icon="fa-arrow-circle-right" href="http://www.000081.xyz/index.php/26-1.html" type="secondary" content="预览"/}<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>立方体</title> <style> * { margin: 0; padding: 0; box-sizing: border-box; border: 0; } .warp { width: 200px; height: 200px; left: 0; right: 0; bottom: 0; top: 0; margin: auto; position: absolute; transform: rotate3d(1, 1, 0, -30deg); transform-style: preserve-3d; animation: donghua 5s 0.2s linear infinite; } @keyframes donghua { 0% { transform: rotateY(0) rotateX(30deg); } 100% { transform: rotateY(360deg) rotateX(30deg); } } .warp div { width: 200px; height: 200px; font-size: 250px; text-align: center; position: absolute; line-height: 200px; } .warp div:nth-child(1) { background: rgba(255, 0, 0, 0.6); transform: translateZ(100px); } .warp div:nth-child(2) { background: rgba(0, 255, 0, 0.6); transform: translateZ(-100px) rotateY(180deg); } .warp div:nth-child(3) { background: rgba(0, 0, 255, 0.6); transform: translateX(-100px) rotateY(-90deg); } .warp div:nth-child(4) { background: rgba(255, 255, 0, 0.6); transform: translateX(100px) rotateY(90deg); } .warp div:nth-child(5) { background: rgba(255, 100, 100, 0.6); transform: translateY(-100px) rotateX(90deg); } .warp div:nth-child(6) { background: rgba(255, 0, 255, 0.6); transform: translateY(100px) rotateX(-90deg); } </style> </head> <body> <div class="warp"> <div>⚀</div> <div>⚁</div> <div>⚂</div> <div>⚃</div> <div>⚄</div> <div>⚅</div> </div> </body> </html>
