CSS transform: matrix3d() - After transition, image pops back into place instead of easing?

Question

I'm trying to implement a 3D matrix transform on an image. The transform works correctly as I hover over the image. However, I can't seem to make it transition back to its original placement smoothly. When I leave the image after hovering it pops back into place quickly, not a smooth transition.

(Also, I'm trying to ultimately mirror this transition - to make the image bend to the right instead of the left...any ideas?)

Tried so many different solutions - any help would be great!

JSFiddle https://jsfiddle.net/0roefvye/

.rot {
  width: 100px;
  height: 100px;
  background-color: black;
}

.rot:hover {
  transform: matrix3d(0.9659258262890683, 0, 0.25881904510252074, 0, 0, 1, 0, 0, -0.25881904510252074, 0, 0.9659258262890683, 0, 0, 0, 0, 1);
  transition-delay: 0s;
  transition-duration: 2s;
  transition-timing-function: ease;
}

Kalpesh Singh · Accepted Answer · 2016-05-11 10:27:17Z

2

If you want same effect on mouse out then you should put all delay, timing function etc. on the actual class, not on hover.

.rot {
  width: 100px;
  height: 100px;
  background-color: black;
   transition-delay: 0s;
  transition-duration: 2s;
  transition-timing-function: ease;
}

.rot:hover {
  transform: matrix3d(0.9659258262890683, 0, 0.25881904510252074, 0, 0, 1, 0, 0, -0.25881904510252074, 0, 0.9659258262890683, 0, 0, 0, 0, 1);
 
}

<div class="rot"></div>

answered May 11, 2016 at 10:27

Kalpesh Singh

1,71714 silver badges16 bronze badges

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

4 Comments

domburford Over a year ago

MASSIVE thank you! Any idea on the values needed to transform the image to the right instead of to the left?

Kalpesh Singh Over a year ago

using matrix3d? then I need to dig Internet?

domburford Over a year ago

Yeh, using matrix3d - instead of moving to the left as it currently does, bending to the right.

Kalpesh Singh Over a year ago

the best way is to use online CSS tool for this.

Shaggy · Accepted Answer · 2016-05-11 11:03:39Z

1

By applying a transition to any pseudo-class, such as :hover, that transition will only be applied when the element is in the associated state.

To achieve what you want you would therefore need to apply the transition to the .rot class:

.rot {
  width: 100px;
  height: 100px;
  background-color: black;
  transition:transform 2s ease;
}
.rot:hover {
  transform: matrix3d(0.9659258262890683, 0, 0.25881904510252074, 0, 0, 1, 0, 0, -0.25881904510252074, 0, 0.9659258262890683, 0, 0, 0, 0, 1);
}

<div class="rot"></div>

As to the second part of your question, I'm not 100% sure on the exact effect you're attempting to achieve (could you edit your question to include an example?) but simply adding a transform-origin might do the trick for you:

.rot {
  width: 100px;
  height: 100px;
  background-color: black;
  transition: transform 2s ease;
  transform-origin: 0 0;
}
.rot:hover {
  transform: matrix3d(0.9659258262890683, 0, 0.25881904510252074, 0, 0, 1, 0, 0, -0.25881904510252074, 0, 0.9659258262890683, 0, 0, 0, 0, 1);
}

<div class="rot"></div>

edited May 11, 2016 at 11:03

answered May 11, 2016 at 10:29

Shaggy

6,8062 gold badges27 silver badges47 bronze badges

3 Comments

domburford Over a year ago

Thank you SO much! Would you happen to know the values needed to create a transition to the right rather than the left?

Shaggy Over a year ago

Check the second Snippet I just added.

Shaggy Over a year ago

You're welcome :) If this has answered your question to your satisfaction, you might consider accepting it.

Collectives™ on Stack Overflow

CSS transform: matrix3d() - After transition, image pops back into place instead of easing?

2 Answers 2

4 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related