css3 - 3D transform doesn't work on ie -

-


css3 - 3D transform doesn't work on ie -

i 3d transformation , on browsers works fine on ie doesn't work. if have time please see illustration first in normal browser see transform after on ie.

on illustration need click on image.

css. write sass

.item { width: 388px; height: 273px; position: relative; float: left; margin: 0 0 2px 2px; cursor: pointer; outline: 1px solid transparent; -webkit-transition: .5s; -moz-transition: .5s; -ms-transition: .5s; transition: .5s; -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; -ms-transform-style: preserve-3d; transform-style: preserve-3d; img { display: block; width: 388px; height: 273px; } } .top { width: 1170px; margin: 0 auto; .item { .button { content: attr(data-title); top: 100%; width: 100%; height: 50px; position: absolute; left: 0; background: rgba(0, 0, 0,0.7); font-size: 22px; color: #fff; font-weight: 400; line-height: 50px; padding: 0 0 0 15px; text-transform: uppercase; -webkit-transform-origin: 0% 0%; -webkit-transform: rotatex(-90deg); -moz-transform-origin: 0% 0%; -moz-transform: rotatex(-90deg); -ms-transform-origin: 0% 0%; -ms-transform: rotatex(-90deg); transform-origin: 0% 0%; transform: rotatex(-90deg); p { display: inline-block; font-size: 18px; } } &.active { .button { background: rgba(235, 141, 3, 0.7); } } } &.transform-top { .item { overflow: visible; -webkit-transform-origin: 50% 0%; -webkit-transform: rotatex(89.99deg) translatey(-100%); -moz-transform-origin: 50% 0%; -moz-transform: rotatex(90deg) translatey(-100%); -ms-transform-origin: 50% 0%; -ms-transform: rotatex(90deg) translatey(-100%); transform-origin: 50% 0%; transform: rotatex(89.99deg) translatey(-100%); } } }

html

<div class="top"> <div class="item"> <img alt="" src="http://conceptmds.com/demo/wp-content/uploads/2015/02/winter-glory-30-x-30-cm-1-370x260.jpg"> <span class="button">winter glory <p>30 x 30cm</p></span> </div> </div>

live version

live

ie doesn't back upwards transform-style: preserve-3d yet.

you can check http://caniuse.com/#feat=transforms3d

css3 internet-explorer 3d transform preserve-3d

Comments

Post a Comment

Popular posts from this blog

python - How to add an model instance to a django queryset? -

-
python - How to add an model instance to a django queryset? - it seems django queryset behaves somehow python list. but doesn't back upwards list's .append() method know. what want like: from my_django_app.models import mymodel queryset = mymodel.objects.none() queryset.append(mymodel.objects.first()) ## no list's .append() method! is there way add together model instance existing queryset? no. queryset representation of query - hence name - not arbitrary collection of instances. if need actual queryset rather list, seek accumulating ids of objects need , getting objects via __in query: list_of_ids = [] list_of_ids.append(my_id) ... queryset = mymodel.objects.filter(id__in=list_of_ids) this isn't efficient, though. python django
Read more

Using Android Volley to post an array to PHP -

-
Using Android Volley to post an array to PHP - this how post values volley: @override protected map<string, string> getparams() { jsonobject jsonobjectmembers=new jsonobject(); (int i=0; i<arr_added_userids.size(); i++) { seek { jsonobjectmembers.put("params_"+i,arr_added_userids.get(i)); } grab (jsonexception e) { e.printstacktrace(); } } map<string, string> params = new hashmap<string, string>(); params.put("host", session_userid); params.put("params",jsonobjectmembers.tostring()); homecoming params; } this tried: foreach($_post['params'] $key => $value) { seek { $stmt = $conn->prepare("insert crewmembers (crewid, member) values (:crewid, :member)"); $query_params = array( ':crewid' => $crewid, ':member' => $value ); ...
Read more

angularjs - No 'Access-Control-Allow-Origin' error from local domain to public API -

-
angularjs - No 'Access-Control-Allow-Origin' error from local domain to public API - i'm trying create app retrieve stock name, asking , purchase cost yahoo finance api, using restangular. i'm having problem accessing public api in local application i'm creating when request. url parameters i'm sending: http://finance.yahoo.com/d/quotes.csv?s=msft+ge&f=nab using postman, request returns array contains stock name, asking cost , purchase cost of stock. doing request in postman returns desired info without errors. when request in local, next error: xmlhttprequest cannot load http://finance.yahoo.com/d/quotes.csv?s=msft+ge&f=nab. no 'access-control-allow-origin' header nowadays on requested resource. origin 'http://localhost' hence not allowed access. the html code follows: <html ng-app="app"> <head> <title>restangular</title> <script src="https://ajax.googleapis.com/ajax/li...
Read more