cssrotationcss-transforms

Rotate 45-degree element around vertical axis


I've got a series of elements, as shown in the image below:

enter image description here

They are rotated 45 degrees to one side (the content inside -45 degrees, to remain upright).

Now I'd like to rotate each element around a vertical axis, going through the element's center. RotateY doesn't work, as it is at a 45-degree angle.

How would you go about doing this?


Solution

  • The trick is to set this rotation before the 45 degrees rotation:

    Notice also that to make the rotation behave really as expect, you need to set it to 0 in the base state

    .container {
        width: 200px;
        height: 200px;
        margin: 100px;
        border: solid 1px;
        transform: rotateY(0deg) rotate(45deg); /* needs Y at 0 deg to behave properly*/
        transition: transform 2s;
    }
    
    
    .container:hover {
        transform:  rotateY(180deg) rotate(45deg); /* notice the order */
    }
    .inner {
        margin: 50px;
        transform: rotate(-45deg);
    }
    <div class="container">
    <div class="inner">INNER</div>
    </div>