Labels

php (35) javascript (31) phpjavascript (30) jquery (23) html (20) mysql (14) database (9) codeigniter (4) json (4) bar chart (2) calendar (2) column chart (2) framework (2) google maps (2) query (2) tables (2) url (2) dropdown (1)

Tuesday, May 29, 2018

Animated 3D Cube Using HTML CSS JAVASCRIPT

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






14 comments:

  1. Great blog, your blog looks amazing to reed & Thanks for postingLed High Bay Lights

    ReplyDelete
  2. Great article, Great content with all the helpful information.

    Visit architectural design studio!

    ReplyDelete
  3. This comment has been removed by the author.

    ReplyDelete
  4. Very nice article
    thanks for sharing with us, keep posting.
    for more information visit: https://bit.ly/2t6Vrcv

    ReplyDelete

More Posts

FOLLOW