Geek Answers Handbook

CSS Convert error in Webkit when using perspective, rotateX, rotateY and scale

I have the following fiddle: http://jsfiddle.net/cYwkz/

I use the following CSS:

article { border: 2px solid #cccccc; background-color: #e5e5e5; border-radius: 5px; display: inline-block; height: 150px; margin: 0 2% 32px; position: relative; vertical-align: top; width: 160px; -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; -webkit-transition: all .2s ease; -moz-transition: all .2s ease; transition: all .2s ease; -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; -o-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-transform-origin: center; -moz-transform-origin: center; -o-transform-origin: center; transform-origin: center; } article:hover { -webkit-transform: perspective(400px) rotateX(5deg) rotateY(5deg) scale(1.025); -moz-transform: perspective(400px) rotateX(5deg) rotateY(5deg) scale(1.025); -ms-transform: perspective(400px) rotateX(5deg) rotateY(5deg) scale(1.025); -o-transform: perspective(400px) rotateX(5deg) rotateY(5deg) scale(1.025); transform: perspective(400px) rotateX(5deg) rotateY(5deg) scale(1.025); }

When I find the bottom left of the articles, guidance and conversions work correctly. However, when I got the better of the right side, the conversion flickers or sometimes does not start at all. I do not have these problems in Firefox.

System: Mac OSX 10.9.1 Works in: Firefox 26, Firefox Aurora 28, IE10 Failed: Chrome 32, Safari 7.0.1, Opera Next 19

Hope you guys can help! thanks in advance

+7
css css3 transition webkit transform
source share
2 answers

The problem arises because in webkit, a plane located at z = 0 receives hover events (so to speak).

Since your rotation causes the elements (especially the top right) to go away (or inside the screen), they fall under the zplane and no longer freeze.

You can decide that moving them in the z direction is positive:

 -webkit-transform: perspective(400px) rotateX(5deg) rotateY(5deg) translateZ(10px) scale(1.025);

To avoid Z moving in the guidance state, set the same Z in the base state.

 -webkit-transform: perspective(400px) rotateX(0deg) rotateY(0deg) translateZ(10px) scale(1);

When using transitions, it is always useful to set the basic transformation in the same way as the transformed state. That is why I installed 0deg rotation.

fiddle

+11
source share

I used this code below

 <style> .outer div { float: left; -webkit-perspective: 200px; -webkit-transform-style: preserve-3d; } .outer a { -webkit-transition: all 1.0s ease-in-out; background:#0F6; width:100px; height:100px; display:block; -webkit-transform: rotateY(45deg); } .outer div:hover a { -webkit-transform: none; } </style> <div class="outer"> <div> <a href="http://www.google.com/"></a> </div> </div>

This solution works for me in chrome. http://jsfiddle.net/jaxweb/7qtLD/7/

0
source share

More articles:


All Articles