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-3d property, indicates flattening not performed. @ time, internet explorer 10 not support preserve-3d keyword. 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

Popular posts from this blog

mod rewrite - Using "?" when rewriting the URL -

-
i have been researching weeks looking how rewritting file/directory complementary "?" or "question mark" what need: http://mydomain.com/demo01.php to like: http://mydomain.com/?theme=jerus theme > simple directory need use websites products(in case themes) jerus > name of theme extra info: i plan on rewritting every url individually refrain wildcard varibles.** wouldn't easy instead of doing url rewriting put php in directory called theme , name index.php? http://mydomain.com/theme/?t=jerus but if you're re-writing urls make rule acutally make route this: http://mydomain.com/theme/jerus/ which waaaay prettier see question: using clean urls in restful api
Read more

Admob integration with pygame in android -

-
hello curious know solution integrating admob app written in pygame subset android. have tried below things did' t work me :( still nothing working me may there no way :( try 1: followed google https://developers.google.com/mobile-ads-sdk/docs/admob/fundamentals#android solution has no code change build.xml modification didt works me :( try 2: tried below solutio also. http://www.michenux.net/android-admob-tutorial-461.html did't work me :( try 3: tried hack pythonactivity.java. getting below related errors. have googleadmobadssdk-6.4.1.jar in \pgs4a-0.9.4\libs path still below kind of error. below code: protected void oncreate(bundle savedinstancestate) { super.oncreate(savedinstancestate); //vrbilgi setcontentview(r_layout_main); // setcontentview(r.layout.main); // create adview // adview = new adview(this, adsize.banner, my_ad_unit_id); adview = new adview(this, adsize.banner,"a15...
Read more

.htaccess: Transfer name to index.php if not directory public -

-
i have piece of code: options followsymlinks <ifmodule mod_rewrite.c> rewriteengine on rewritecond %{request_filename} !-f rewritecond %{request_filename} !-d rewritecond %{request_filename} !-l rewriterule ^(.*)$ index.php?url=$1 [l] </ifmodule> <ifmodule !mod_rewrite.c> errordocument 404 /index.php </ifmodule> i don't know how allow directory name "public" inside folder .htaccess, other names dir should transfered index.php. how that? add rewritecond exclude public directory rewritecond %{request_filename} !-f rewritecond %{request_filename} !-d rewritecond %{request_filename} !-l rewritecond %{request_uri} ^/public(/.*)?$ rewriterule ^(.*)$ index.php?url=$1 [l] now, redirection work /public directories only. if want url have rest of path that's below public url=subfolder/page.php /public/subfolder/page.php use rewritecond %{request_filename} !-f rewritecond %{request_filename} !-d rewrit...
Read more