CODEWITHSUNDEEP
htmlcss
someuser2491
someuser2491

Reputation: 1978

How to rotate a 3d cube along x axis using css?

i am new to programming and i want to rotate the 3d cube along x axis using css.

I have added the cube and below is the html and css to it.

could someone let me know how to add the animation.

below is the code,

<div id="wrapper">
    <div class="cube">
        <!--Front-->
        <div></div>
        <!--Back-->
        <div></div>
        <!--Left-->
        <div></div>
        <!--Right-->
        <div></div>
        <!--Top-->
        <div></div>
        <!--Bottom-->
        <div></div>
        </div>
</div>

#wrapper{
    width:300px;
    height:300px;
    perspective:700px;
    -webkit-perspective:700px;
    margin:100px auto;
}

.cube{
    position:relative;
    width:150px;
    height:150px;
    transform-style:preserve-3d;
    transform:rotateY(35deg) rotatex(-38deg);
}

.cube div{
    position:absolute;
    width:150px;
    height:150px;
    background:rgba(0,0,0,0.1);
}

.cube div:nth-child(1){
    transform:translateZ(75px);
    background:#666666;
}

.cube div:nth-child(2){
    transform: rotateX(180deg) translateZ(75px);
    background:#4d4d4d;
}

.cube div:nth-child(3){
    transform: rotateY(-90deg) translateZ(75px);

    background:#666666;
}

.cube div:nth-child(4){
    transform:rotateY(90deg) translateZ(75px);
    background:#4d4d4d;
}

.cube div:nth-child(5){
    transform: rotateX(90deg) translateZ(75px);
    background:#666666;
}

.cube div:nth-child(6){
    transform:rotateX(-90deg) translateZ(75px);
    background:#4d4d4d;
}

I want it to rotate the cube like in this example https://www.youtube.com/watch?v=3yLL9ADo-ko

Could someone help me with this. i want the cube to rotate from x axis...thanks.

Upvotes: 1

Views: 1365

Answers (2)

Max Voisard
Max Voisard

Reputation: 1942

I see for the <div> tags you have under the cube class, you have comments saying which are supposed to be the front side, back side, left side, etc. Simply put in classes for the names of each side and then add the following CSS for each. Then you will need to put in a keyframes selector and animation attribute to rotate the cube on the x-axis. My code snippet shows the full CSS followed by the full HTML:

.back {
    transform: translateZ(-100px) rotateY(180deg);
    background-color: red;
    opacity: 0.5;
}

.right {
    transform: rotateY(-270deg) translateX(100px);
    transform-origin: top right;
    background-color: green;
    opacity: 0.5;
}

.left {
    transform: rotateY(270deg) translateX(-100px);
    transform-origin: center left;
    background-color: yellow;
    opacity: 0.5;
}

.top {
    transform: rotateX(-90deg) translateY(-100px);
    transform-origin: top center;
    background-color: purple;
    opacity: 0.5;
}

.bottom {
    transform: rotateX(90deg) translateY(100px);
    transform-origin: bottom center;
    background-color: orange;
    opacity: 0.5;
}

.front {
    transform: translateZ(100px);
    background-color: blue;
    opacity: 0.5;
}

.wrapper {
    perspective: 800px;
    perspective-origin: 50% 100px;
    margin-left: 100px;
    margin-top: 100px;
}

.cube {
    position: relative;
    width: 200px;
    transform-style: preserve-3d;
    animation: spin 5s infinite linear;
}

.cube div {
    position: absolute;
    width: 200px;
    height: 200px;
    text-align: center;
}

@keyframes spin {
    from { transform: rotateY(0); }
    to { transform: rotateY(360deg); }
}
<div class="wrapper">
    <div class="cube">
        <div class="front">Front</div>
        <div class="back">Back</div>
        <div class="top">Top</div>
        <div class="bottom">Bottom</div>
        <div class="left">Left</div>
        <div class="right">Right</div>
    </div>
</div>

I decided to add background colors to each side of the cube and text saying stuff like "Front" or "Back" to make it look neat and such. You can edit that out as you wish. I also made a JSFiddle here: https://jsfiddle.net/vhwu5xjs/

Upvotes: 1

Ashique
Ashique

Reputation: 355

You can use CSS Animation to achieve different type of Animations. For details, you can look at the below link- https://www.w3schools.com/css/css3_animations.asp

You can create your own animation like this-

@keyframes example {
  from {transform: rotateY(0deg);}
  to {transform: rotateY(360deg);}
}

And run the animation using the below controls-

animation-name
animation-duration
animation-delay
animation-iteration-count
animation-direction
animation-timing-function
animation-fill-mode
animation

I have modified some of your code to achieve what you want. Please look at the below codepen- https://codepen.io/ashfaq_haq/pen/JjjJZvp

Upvotes: 0

Related Questions