CODEWITHSUNDEEP
htmlcss
Magdi Gamal
Magdi Gamal

Reputation: 678

css3 3D rotation move slightly outside it's transform origin when adding a transition?

I made a css3 cube, and I'm trying to make one side of the cube to open, in the same way a door or a window would open. So I used the transformY and sat transform origin to right along with a 2s transition. Ultimately it reaches the point I expected it to. but during the transition there's a slight turn to the left before it start moving to the right. I want to stop that.

This is my code simplified as much as possible

<div class="parent">
  <div></div>
</div>

css

.parent {
  perspective: 1000px;
}

.parent div {
  background: #ff6b6b;
  width: 300px;
  height: 300px;
  margin: 30px;
}

.parent div:hover {
  transform: rotateY(180deg);
  transform-origin: right center;
  transition: all 2s;
}

I need this div to rotate in a horizontal path, with the right side being the transform origin and not changing place. But it slightly does, to the left. How do I fix that? Sorry if this isn't very clear.

Upvotes: 2

Views: 1288

Answers (1)

vals
vals

Reputation: 64194

You have set transform-origin in the hover state.

But not in the base state.

That means that in your transition you are not only rotating, but also changing the rotation point.

It should be

.parent div {
  background: #ff6b6b;
  width: 300px;
  height: 300px;
  margin: 0px;
  -webkit-transform-origin: right center;
  transform-origin: right center;
}

.parent div:hover {
  -webkit-transform: rotateY(180deg);
  transform: rotateY(180deg);
  transition: all 2s;
}

fiddle

Upvotes: 1

Related Questions