Animated 3D Cube Using HTML CSS JAVASCRIPT
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> | |
| <script src="https://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script> | |
| <title>CSS3 3D Cube</title> | |
| <style> | |
| body{line-height:1} | |
| nav ul{list-style:none} | |
| blockquote,q{quotes:none} | |
| blockquote:before,blockquote:after,q:before,q:after{content:none} | |
| a{margin:0;padding:0;font-size:100%;vertical-align:baseline;background:transparent} | |
| ins{background-color:#ff9;color:#000;text-decoration:none} | |
| mark{background-color:#ff9;color:#000;font-style:italic;font-weight:bold} | |
| del{text-decoration:line-through} | |
| abbr[title],dfn[title]{border-bottom:1px dotted;cursor:help} | |
| table{border-collapse:collapse;border-spacing:0} | |
| hr{display:block;height:1px;border:0;border-top:1px solid #ccc;margin:1em 0;padding:0} | |
| input,select{vertical-align:middle} | |
| a, a:visited { | |
| color: #0101d0; | |
| font-weight: bold; | |
| cursor: pointer; | |
| font-size: 20px; | |
| font-family: arial; | |
| line-height: 20px; | |
| display: inline-block; | |
| padding: 10px; | |
| } | |
| a:hover { | |
| color: #000; | |
| } | |
| #wrapD3Cube { | |
| width: 250px; | |
| height: 213px; | |
| margin: 20px auto; | |
| background-color: #EEE; | |
| } | |
| #D3Cube { | |
| width: 112px; | |
| height: 112px; | |
| top: 50px; | |
| transform-style: preserve-3d; | |
| -moz-transform-style: preserve-3d; | |
| -webkit-transform-style: preserve-3d; | |
| transform: rotateX(-22deg) rotateY(-38deg) rotateZ(0deg); | |
| -moz-transform: rotateX(-22deg) rotateY(-38deg) rotateZ(0deg); | |
| -webkit-transform: rotateX(-22deg) rotateY(-38deg) rotateZ(0deg); | |
| margin: auto; | |
| position: relative; | |
| -moz-transform-style: preserve-3d; | |
| transform-style: preserve-3d; | |
| -webkit-transition: all 0.5s ease-in-out; | |
| transition: all 0.5s ease-in-out; | |
| } | |
| #D3Cube > div { | |
| position: absolute; | |
| -webkit-transition: all 0.5s ease-in-out; | |
| transition: all 0.5s ease-in-out; | |
| width: 112px; | |
| height: 112px; | |
| float: left; | |
| overflow: hidden; | |
| opacity: 0.85; | |
| } | |
| #side1 { | |
| transform: rotatex(90deg) translateX(0px) translateY(0px) translateZ(56px); | |
| -moz-transform: rotatex(90deg) translateX(0px) translateY(0px) translateZ(56px); | |
| -webkit-transform: rotatex(90deg) translateX(0px) translateY(0px) translateZ(56px); | |
| background-color: #ff0000; | |
| } | |
| #side2 { | |
| transform: rotateY(-90deg) translateX(0px) translateY(0px) translateZ(56px); | |
| -moz-transform: rotateY(-90deg) translateX(0px) translateY(0px) translateZ(56px); | |
| -webkit-transform: rotateY(-90deg) translateX(0px) translateY(0px) translateZ(56px); | |
| background-color: #4d0000; | |
| } | |
| #side3 { | |
| transform: translateX(0px) translateY(0px) translateZ(56px); | |
| -moz-transform: translateX(0px) translateY(0px) translateZ(56px); | |
| -webkit-transform: translateX(0px) translateY(0px) translateZ(56px); | |
| background-color: #006600; | |
| } | |
| #side4 { | |
| transform: rotateY(90deg) translateX(0px) translateY(0px) translateZ(56px); | |
| -moz-transform: rotateY(90deg) translateX(0px) translateY(0px) translateZ(56px); | |
| -webkit-transform: rotateY(90deg) translateX(0px) translateY(0px) translateZ(56px); | |
| background-color: #000066; | |
| } | |
| #side5 { | |
| transform: rotateY(180deg) translateX(0px) translateY(0px) translateZ(56px); | |
| -moz-transform: rotateY(180deg) translateX(0px) translateY(0px) translateZ(56px); | |
| -webkit-transform: rotateY(180deg) translateX(0px) translateY(0px) translateZ(56px); | |
| background-color: #602020; | |
| } | |
| #side6 { | |
| transform: rotateX(-90deg) translateX(0px) translateY(0px) translateZ(56px); | |
| -moz-transform: rotateX(-90deg) translateX(0px) translateY(0px) translateZ(56px); | |
| -webkit-transform: rotateX(-90deg) translateX(0px) translateY(0px) translateZ(56px); | |
| background-color: #3399ff; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div id="wrapD3Cube"> | |
| <div id="D3Cube"> | |
| <div id="side1"></div> | |
| <div id="side2"></div> | |
| <div id="side3"></div> | |
| <div id="side4"></div> | |
| <div id="side5"></div> | |
| <div id="side6"></div> | |
| </div> | |
| </div> | |
| <p style="text-align: center;"> | |
| <a onclick="turnLeft()">Left</a> | |
| <a onclick="turnRight()">Right</a> <br /> | |
| <a onclick="flipCube()">Flip</a> | |
| </p> | |
| </body> | |
| <script> | |
| var cubex = -22, // initial rotation | |
| cubey = -38, | |
| cubez = 0; | |
| function rotate(variableName, degrees) { | |
| window[variableName] = window[variableName] + degrees; | |
| rotCube(cubex, cubey, cubez); | |
| } | |
| function rotCube(degx, degy, degz){ | |
| segs = "rotateX("+degx+"deg) rotateY("+degy+"deg) rotateZ("+degz+"deg) translateX(0) translateY(0) translateZ(0)"; | |
| $('#D3Cube').css({"transform":segs}); | |
| } | |
| function turnRight() { | |
| rotate("cubey", 90); | |
| } | |
| function turnLeft() { | |
| rotate("cubey", -90); | |
| } | |
| function flipCube() { | |
| rotate("cubez", -180); | |
| } | |
| </script> | |
| </html> |
Result
