html - Safari transform rotatex bug -
i have weird bug safari...
i have 3 divs captions, hidden rotatex(-91deg)
. on :hover
caption comes down via rotatex(0deg)
. works in chrome etc. when hover in safari works on first div. when hover on 2. or 3. animation doesn't work.
check out demo: http://jsbin.com/aseced/28/edit
html:
<article class="tile2x1"> <section class="caption"></section> </article> <article class="tile2x1"> <section class="caption"></section> </article> <article class="tile2x1"> <section class="caption"></section> </article>
css:
[class*="tile"] > section.caption { padding-top: 20px; width: 100%; background-color: blue; height: 100px; transform-origin: top; -o-transform-origin: top; -moz-transform-origin: top; -webkit-transform-origin: top; transform: perspective( 600px ) rotatex( -91deg ); -o-transform: perspective( 600px ) rotatex( -91deg ); -moz-transform: perspective( 600px ) rotatex( -91deg ); -webkit-transform: perspective( 600px ) rotatex( -91deg ); transition: .25s linear; -o-transition: .25s linear; -moz-transition: .25s linear; -webkit-transition: .25s linear; backface-visibility: hidden; -webkit-backface-visibility: hidden; /* chrome , safari */ -moz-backface-visibility: hidden; /* firefox */ -ms-backface-visibility: hidden; /* internet explorer */ } [class*="tile"]:hover > section.caption { transform: perspective( 600px ) rotatex( 0deg ); -o-transform: perspective( 600px ) rotatex( 0deg ); -moz-transform: perspective( 600px ) rotatex( 0deg ); -webkit-transform: perspective( 600px ) rotatex( 0deg ); }
thanks help.
tjl
Comments
Post a Comment