html5 - preserve-3d not working in IE10 -
<body> <article class="viewport"> <section class="cube"> <div> <div class="part psm"><span data-href="#test">c1a</span></div> <div class="part rm"> <span data-href="#test">c1b</span></div> <div class="part ims" style="background: #f0e200;"><span data-href="#test">c1c</span></div> <div class="part bsm"><span data-href="#test">c1d</span></div> </div> <div> <div class="part ims" style="background: #f0e200;"><span data-href="#test">c2a</span></div> <div class="part bsm"><span data-href="#test">c2b</span></div> <div class="part pm"> <span data-href="#test">c2c</span></div> <div class="part um"> <span data-href="#test">c2d</span></div> </div> <div> <div class="part bsm"><span data-href="#test">c3a</span></div> <div class="part rm"> <span data-href="#test">c3b</span></div> <div class="part um"> <span data-href="#test">c3c</span></div> <div class="part" style="background:#00a070;"><span data-href="#test">c3d</span></div> </div> <div> <div class="part rm"> <span data-href="#test">c4a</span></div> <div class="part psm"><span data-href="#test">c4b</span></div> <div class="part" style="background:#00a070;"><span data-href="#test">c4c</span></div> <div class="part qm"> <span data-href="#test">c4d</span></div> </div> <div> <div class="part psm"><span data-href="#test">c5a</span></div> <div class="part ims" style="background: #f0e200;"><span data-href="#test">c5b</span></div> <div class="part qm"> <span data-href="#test">c5c</span></div> <div class="part pm"> <span data-href="#test">c5d</span></div> </div> <div> <div class="part qm"><span data-href="#test">c6a</span></div> <div class="part pm"><span data-href="#test">c6b</span></div> <div class="part" style="background:#00a070;"><span data-href="#test">c6c</span></div> <div class="part um"><span data-href="#test">c6d</span></div> </div> </section>
css
body{ background:#fff; } span{ margin: 90px 0 0 20px; font-size:40px; float: left; line-height: 35px; text-decoration: none; color:#fff; } .ims > span{ font-size:125px; margin: 120px 0px 0px 25px; text-align: center; float: left; font-weight: bold; text-decoration: none; color:#00a070; } .part{ background: #00a070; width:275px; height:275px; float:left; margin:10px; font-family: arial; cursor: pointer; user-select: none; } .viewport { perspective: 1300px; -webkit-perspective: 1300px; perspective-origin: 50% 0px; -webkit-perspective-origin: 50% 0px; transform: scale(0.45,0.45); -webkit-transform: scale(0.45,0.45); -ms-transform: scale(0.45,0.45); } .cube { margin: 0 auto; height: 600px; width: 600px; transition: transform 50ms linear; -webkit-transition: transform 50ms linear; transform-style: preserve-3d; -webkit-transform-style: preserve-3d; transform: rotatex(-25deg) rotatey(45deg); -ms-transform: rotatex(-25deg) rotatey(45deg); -webkit-transform: rotatex(-25deg) rotatey(45deg); } .cube > div { position: absolute; height: 592px; width: 592px; padding: 5px; background-color: #fff; color: #fff; } .cube > div:first-child { transform: rotatex(90deg) translatez(300px); -webkit-transform: rotatex(90deg) translatez(300px); -ms-transform: rotatex(90deg) translatez(300px); } .cube > div:nth-child(2) { transform: translatez(300px); -webkit-transform: translatez(300px); -ms-transform: translatez(300px); } .cube > div:nth-child(3) { transform: rotatey(90deg) translatez(300px); -webkit-transform: rotatey(90deg) translatez(300px); -ms-transform: rotatey(90deg) translatez(300px); } .cube > div:nth-child(4) { transform: rotatey(180deg) translatez(300px); -webkit-transform: rotatey(180deg) translatez(300px); -ms-transform: rotatey(180deg) translatez(300px); } .cube > div:nth-child(5) { transform: rotatey(-90deg) translatez(300px); -webkit-transform: rotatey(-90deg) translatez(300px); -ms-transform: rotatey(-90deg) translatez(300px); } .cube > div:nth-child(6) { transform: rotatex(-90deg) rotate(270deg) translatez(300px); -webkit-transform: rotatex(-90deg) rotate(270deg) translatez(300px); -ms-transform: rotatex(-90deg) rotate(270deg) translatez(300px); } here code of 3d-cube working chrome , safari not working ie10. found transform-style:presev-3d, preservative:1300px,preservative-origin:50% 300px; not working ie10. solution or alternative property work in ie10?
please view jsfiddle link , me.jsfiddle thank shesh
preserve-3d not supported in ie10, though in other current-version browsers. see http://caniuse.com/transforms3d.
the workaround stated on msdn website:
note: the w3c specification defines keyword value of
preserve-3dproperty, indicates flattening not performed. @ time, internet explorer 10 not supportpreserve-3dkeyword. can work around manually applying parent element's transform each of child elements in addition child element's normal transform.
credit goes rob discovering link.
Comments
Post a Comment