Explanation:
[tex]<!DOCTYPE html>
<html lang="en">
<head>
<title>CUBE</title>
</head>
<body>
<div >
<div id="cube">
[tex]
What is wrong with this code
Share
Explanation:
[tex]<!DOCTYPE html>
<html lang="en">
<head>
<title>CUBE</title>
</head>
<body>
<div >
<div id="cube">
[tex]
What is wrong with this code
Sign Up to our social questions and Answers Engine to ask questions, answer people’s questions, and connect with other people.
Login to our social questions & Answers Engine to ask questions answer people’s questions & connect with other people.
<!DOCTYPE html>
<html lang="en">
<head>
<title>CUBE</title>
</head>
<body>
<div class="container">
<div id="cube">
<div class="front">Abhay</div>
<div class="back">Abhay</div>
<div class="right">Abhay</div>
<div class="left">Abhay</div>
<div class="top">Abhay</div>
<div class="bottom">Abhay</div>
</div>
</div>
<style>
body {
padding-left: 30%;
padding-top: 5%;
}
.container {
width: 200px;
height: 200px;
position: relative;
-webkit-perspective: 1000px;
-moz-perspective: 1000px;
}
#cube {
width: 100%;
height: 100%;
position: absolute;
-webkit-transform-style: preserve-3d;
-webkit-animation: rotatecube 10s infinite;
-moz-transform-style: preserve-3d;
-moz-animation: rotatecube 10s infinite;
}
#cube div {
width: 200px;
height: 200px;
display: block;
position: absolute;
border: none;
line-height: 200px;
text-align: center;
font-size: 50px;
font-weight: bold;
}
@-webkit-keyframes rotatecube {
0% { -webkit-transform: rotateX(0deg) rotateY(360deg) rotateZ(90deg); }
25% { -webkit-transform: rotateX(90deg) rotateY(270deg) rotateZ(180deg); }
50% { -webkit-transform: rotateX(180deg) rotateY(180deg) rotateZ(0deg); }
75% { -webkit-transform: rotateX(270deg) rotateY(90deg) rotateZ(360deg); }
100% { -webkit-transform: rotateX(360deg) rotateY(0deg) rotateZ(270deg); }
}
@-moz-keyframes rotatecube {
0% { -moz-transform: rotateX(0deg) rotateY(360deg) rotateZ(90deg); }
25% { -moz-transform: rotateX(90deg) rotateY(270deg) rotateZ(180deg); }
50% { -moz-transform: rotateX(180deg) rotateY(180deg) rotateZ(0deg); }
75% { -moz-transform: rotateX(270deg) rotateY(90deg) rotateZ(360deg); }
100% { -moz-transform: rotateX(360deg) rotateY(0deg) rotateZ(270deg); }
}
.front {
background: rgba(255,0,0,.5);
}
.back {
background: rgba(0,255,0,.5);
}
.right {
background: rgba(0,0,255,.5);
}
.left {
background: rgba(0,255,255,.5);
}
.top {
background: rgba(255,0,255,.5);
}
.bottom {
background: rgba(255,255,0,.5);
}
#cube .front {
-webkit-transform: rotateY(0deg ) translateZ( 100px );
-moz-transform: rotateY( 0deg ) translateZ( 100px );
}
#cube .back {
-webkit-transform: rotateX( 180deg ) translateZ( 100px );
-moz-transform: rotateX( 180deg ) translateZ( 100px );
}
#cube .right {
-webkit-transform: rotateY( 90deg ) translateZ( 100px );
-moz-transform: rotateY( 90deg ) translateZ( 100px );
}
#cube .left {
-webkit-transform: rotateY( -90deg ) translateZ( 100px );
-moz-transform: rotateY( -90deg ) translateZ( 100px );
}
#cube .top {
-webkit-transform: rotateX( 90deg ) translateZ( 100px );
-moz-transform: rotateX( 90deg ) translateZ( 100px );
}
#cube .bottom {
-webkit-transform: rotateX( -90deg ) translateZ( 100px );
-moz-transform: rotateX( -90deg ) translateZ( 100px );
}
</style>
</body>
</html>[/tex]