jquery - Transform-Style preserve-3d in internet explorer CSS not working -
jquery - Transform-Style preserve-3d in internet explorer CSS not working -
i got website working in opera chrome , firefox gets messed preserve-3d feature in net explorer.
is there way prepare net explorer css code , leave other browsers code right now?
i hope thats possible.
css:
.back img{ max-width: 90%; height: auto; margin: 1em; overflow: hidden; } .front{ margin-top: 0.2em; height: 100%; width: 100%; line-height: 1.2; margin-left: 0.2em; margin-right: 0.2em; } /*container flip*/ /* flip pane when clicked */ .flip .flipper, .flip-container.hover .flipper, .flip-container.flip .flipper { transform: rotatey(180deg); -ms-transform: rotatey(180deg); } /* flip speed goes here */ .flipper { transition: 0.8s; transform-style: preserve-3d; } /* hide of pane during swap */ .front, .back { backface-visibility: hidden; top: 0; left: 0; } /* front end pane, placed above */ .front { /* firefox 31 */ transform: rotatey(0deg); -webkit-transform: rotatey(0deg); position:absolute; margin-top: 1.2em; margin-bottom: 1.2em; margin-left: 20px; overflow: auto; word-break: normal; width: 90%; color: black; } /* back, hidden pane */ .back { transform: rotatey(180deg); }
html:
<div class="flip-container flip"> <div class="flipper"> <div class="back"> <img src="imgsource.png"> </div> <div class="front"> <p>some text</p> </div> </div> </div> <div class="flip-container flip"> <div class="flipper"> <div class="back"> <img src="imgsource.png"> </div> <div class="front"> <p>some text</p> </div> </div> </div> <div class="flip-container flip"> <div class="flipper"> <div class="back"> <img src="imgsource.png"> </div> <div class="front"> <p>some text</p> </div> </div> </div>
if click on .flip-container class .flip class gets removed , textbox show nice effect. doesnt work in net explorer.
thanks helping!
it aleksander bavdaz, provides reply , prepare here:
unfortunately ie uses non-prefixed properties, either can't utilize transform-3d @ or have define prefixed properties last.
css3 3d transform dont work on ie11
jquery html css
Comments
Post a Comment