CSS Transform rotate not working in my code

Question

I tried to create the CSS3 transform simple demos, i got struck as i am not able to see the element is rotating when i use transform:rotate(180deg)

see the codepen:http://codepen.io/shmdhussain/pen/yYMWba

HTML:

<div class="box transz"></div>
<div class="box rotatex"></div>

CSS:

.box {
    background-color: red;
    width: 100px;
    height: 100px;
}

.transz {
    /*Translate Z transform*/
    transform: translate3d(100px, 200px, 100px);
}

.rotatex {
    transform: rotate( 180deg);
}

forsooth · Accepted Answer · 2015-10-05 06:47:53Z

1

I'm confused as to your confusion. For me, your codepen works just fine. The rotate transformation takes the original shape and rotates it one time by the number of degrees you specify. In your case, you're just rotating a square by 90/180/270 degrees, which will look identical to the original. If you rotate by something like 45 degrees, you should see a result. Apologies if there is a more complex problem I'm not seeing!

answered Oct 5, 2015 at 6:47

forsooth

765 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Mohamed Hussain Over a year ago

got confused in simple calc, sorry for that. Got it. any clue about transition on z-axis transform: translate3d(100px, 200px, 100px);

Mohamed Hussain Over a year ago

Moreover I am using the perfect square so that only I am not able to see the rotation in 90,270 deg. Got the point. any help in translate3d

forsooth Over a year ago

No problem, but what do you mean? What behavior are you looking for from that transform? The code you have there should just move your square a little bit.

Mohamed Hussain Over a year ago

Is translate3d is working on my code? ... is there any value in z-axis to easily perceive the changes

Mohamed Hussain Over a year ago

I think we need perspective and transform style to do that.

|

Collectives™ on Stack Overflow

CSS Transform rotate not working in my code

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related