CODEWITHSUNDEEP
cssrotationcss-transforms
Philex
Philex

Reputation: 299

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?

Upvotes: 16

Views: 63696

Answers (4)

feng
feng

Reputation: 1

.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>

Upvotes: 0

vals
vals

Reputation: 64264

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>

Upvotes: 27

Philipp Lehmann
Philipp Lehmann

Reputation: 379

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);
}

Upvotes: 2

Rein
Rein

Reputation: 103

I dont know exactly what your code looks like, but for a simple spinning tile (div) i would try something like this:

@keyframes rotate-vertical {
	0% {
		transform: rotate3d(0, 1, 0, 0deg);
	}
	100% {
		transform: rotate3d(0, 1, 0, 360deg);
	}
}

body {
  padding: 20px;
}

.tile {
  width: 65px;
  height: 65px;
  background-color: red;
  text-align: center;
  transform: rotate3d(0, 0, 1, 45deg);
  display: inline-block;
}

.turndiv {
  width: 65px;
}

.turndiv:hover {
	animation: rotate-vertical 1.1s ease-out;
 }
<div class="turndiv">
  <div class="tile">
  </div>
</div>

You could just do it with transform: rotate3d(); and without a parent div, but to keep it easy i did it like this.

Upvotes: 0

Related Questions