I've got a series of elements, as shown in the image below:
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?
If we represent the point (x,y) by the complex number x+iy, then we can rotate it 45 degrees clockwise simply by multiplying by the complex number (1−i)/√2 and then reading off their x and y coordinates.
rotateY() The rotateY() CSS function defines a transformation that rotates an element around the ordinate (vertical axis) without deforming it.
Let's take a look at the syntax for the rotate() function: transform: rotate(angle); The value “angle” represents the number of degrees the element should rotate. You can specify a rotate that is clockwise using a positive degree number (i.e. 45).
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>
This is how I interpret the question. I'm not very happy with the demo since it needs a lot of structure. But maybe you can verify the behavior?
Basically I use a wrapper to rotate on the y-axis. It is key to set the transform origin to the center. The additional wrapper is used to prevent a flickering on mouse hover.
https://jsfiddle.net/nm59mqky/1/
.tile {
transform: rotateY(0);
transform-origin: center center;
}
.wrapper:hover .tile {
transform: rotateY(180deg);
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With