Why doesn't IE10 display nested CSS3 3D transformed elements?
IE10 Does not support:
transform-style: preserve-3d;
JS feature detect preserve-3d property support for nested elements
Well, I wouldn't bother too much with this. As far as I know IE is so far the only CSS 3D Transform supporting browser that doesn't support preserve-3d
, however I can understand that you want to avoid having to update lots of sites once IE supports it (even if by that time your Autonomous Robot Butler will be able to do that for you).
So, for something that actually tests the support you might want to give this Modernizr test a try:
Tests for "preserve-3d" are not working on Android (via Browserstack)?
http://jsfiddle.net/wsqSw/
Internet Explorer Preserve 3D fix
Internet Explorer 10 and 11 only partially support 3D transforms. (Older versions of Internet Explorer do not support this property).
Internet Explorer 10 and 11 'have only partial support' because:
not supporting the transform-style: preserve-3d property. This
prevents nesting 3D transformed elements.
further Reading
This property is suggested to be implemented in the next version of internet explorer, so unfortunately the current IE doesn't really support any 'good' or 'complex' 3D functionality.
Since IE will 'ignore' this property, you may be able to display a message of banner to inform users to use Chrome or Firefox for better experience (it also means you will have to implement less browser hacks to support IE in general).
In answer to your question
Note The W3C specification defines a keyword value of preserve-3d for
this property, which indicates that flattening is not performed. At
this time, Internet Explorer 10 does not support the preserve-3d
keyword. You can work around this by manually applying the parent
element's transform to each of the child elements in addition to the
child element's normal transform.
This is suggesting to apply the transform of the parent manually on the child element. So the 3d transform stated on your parent (.flip1
) should also be placed on your child element(s) (.back
and .front
) as well.
CSS3 Transformed elements lose their transform during transition. (jsFiddle included)
I would recommend using this technique for creating the hexagons so that you don't get the issues you are currently experiencing when scaling them: http://jsfiddle.net/joshnh/jZMEy/
div {
background: black;
height: 60px;
position: relative;
width: 120px;
-webkit-transition: .25s;
-moz-transition: .25s;
-ms-transition: .25s;
-o-transition: .25s;
transition: .25s;
}
div:after {
border-left: 60px solid transparent;
border-right: 60px solid transparent;
border-top: 35px solid black;
bottom: -35px;
height: 0;
content: '';
left: 0;
position: absolute;
width: 0;
}
div:before {
border-bottom: 35px solid black;
border-left: 60px solid transparent;
border-right: 60px solid transparent;
height: 0;
content: '';
left: 0;
position: absolute;
top: -35px;
width: 0;
}
div:hover {
-webkit-transform: scale(1.5);
-moz-transform: scale(1.5);
-ms-transform: scale(1.5);
-o-transform: scale(1.5);
transform: scale(1.5);
}
How to recreate perspective-origin effect by transforming child elements?
So here we go, as shown by vals, perspective is respected when using transform:translate
to position the faces on the stage, so I figured that the trick is to position the cuboid wrappes in the center of the stage, apply perspective using the perspective()
function, and then translate the faces positions accordingly.
Here's an example, it works fine (fine as in as expected) in IE10/11 and Chrome, in Firefox there's a lot of flickering when the faces of the individual cubes intersect each other, and in Safari (for Windows) the faces are clipped when they intersect (tough it looks like this is actually the correct behaviour, and Firefox, Chrome and IE are wrong. update Let me take that back, actually it looks like Safari is doing it wrong since only elements in the same 3d rendering context are ment to intersect). However, the main goal was IE compatibiilty, and even though it's a an annoyingly large amount of extra CSS, it's working, so...
http://jsfiddle.net/EDzXM/
Code for the jsfiddle example
HTML:
<div class='wrapper'>
<div class='front'>Front</div>
<div class='back'>Back</div>
<div class='top'>Top</div>
<div class='bottom'>Bottom</div>
<div class='left'>Left</div>
<div class='right'>Right</div>
</div>
<div class='wrapper'>
<div class='front'>Front</div>
<div class='back'>Back</div>
<div class='top'>Top</div>
<div class='bottom'>Bottom</div>
<div class='left'>Left</div>
<div class='right'>Right</div>
</div>
<div class='wrapper'>
<div class='front'>Front</div>
<div class='back'>Back</div>
<div class='top'>Top</div>
<div class='bottom'>Bottom</div>
<div class='left'>Left</div>
<div class='right'>Right</div>
</div>
<div class='wrapper'>
<div class='front'>Front</div>
<div class='back'>Back</div>
<div class='top'>Top</div>
<div class='bottom'>Bottom</div>
<div class='left'>Left</div>
<div class='right'>Right</div>
</div>
CSS:
html, body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
overflow: hidden;
}
.wrapper {
position: absolute;
left: 50%;
margin-left: -120px;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.wrapper:nth-child(1) {
z-index: 1;
}
.wrapper:nth-child(2) {
z-index: 2;
}
.wrapper:nth-child(3) {
z-index: 1;
}
.wrapper:nth-child(4) {
z-index: 0;
}
.top, .front, .back, .bottom, .left, .right {
position: absolute;
width: 240px;
height: 400px;
color: #fff;
font-size: 40px;
font-weight: bold;
text-align: center;
line-height: 400px;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-animation-duration: 25s;
animation-duration: 25s;
-webkit-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}
.top, .bottom {
height: 300px;
line-height: 300px;
}
.left, .right {
width: 300px;
}
.front, .back {
-webkit-transform-origin: 50% 50% -150px;
transform-origin: 50% 50% -150px;
}
.top, .bottom {
-webkit-transform-origin: 50% 50% -200px;
transform-origin: 50% 50% -200px;
}
.left, .right {
-webkit-transform-origin: 50% 50% -120px;
transform-origin: 50% 50% -120px;
}
.front {
background-color: #ff0000;
}
.back {
background-color: #00cc00;
}
.top {
background-color: #0000ff;
}
.bottom {
background-color: #cccc00;
}
.left {
background-color: #00cccc;
}
.right {
background-color: #ff00ff;
}
.wrapper:nth-child(1) .front {
-webkit-animation-name: rotate-front-0;
animation-name: rotate-front-0;
}
.wrapper:nth-child(1) .back {
-webkit-animation-name: rotate-back-0;
animation-name: rotate-back-0;
}
.wrapper:nth-child(1) .top {
-webkit-animation-name: rotate-top-0;
animation-name: rotate-top-0;
}
.wrapper:nth-child(1) .bottom {
-webkit-animation-name: rotate-bottom-0;
animation-name: rotate-bottom-0;
}
.wrapper:nth-child(1) .left {
-webkit-animation-name: rotate-left-0;
animation-name: rotate-left-0;
}
.wrapper:nth-child(1) .right {
-webkit-animation-name: rotate-right-0;
animation-name: rotate-right-0;
}
.wrapper:nth-child(2) .front {
-webkit-animation-name: rotate-front-1;
animation-name: rotate-front-1;
}
.wrapper:nth-child(2) .back {
-webkit-animation-name: rotate-back-1;
animation-name: rotate-back-1;
}
.wrapper:nth-child(2) .top {
-webkit-animation-name: rotate-top-1;
animation-name: rotate-top-1;
}
.wrapper:nth-child(2) .bottom {
-webkit-animation-name: rotate-bottom-1;
animation-name: rotate-bottom-1;
}
.wrapper:nth-child(2) .left {
-webkit-animation-name: rotate-left-1;
animation-name: rotate-left-1;
}
.wrapper:nth-child(2) .right {
-webkit-animation-name: rotate-right-1;
animation-name: rotate-right-1;
}
.wrapper:nth-child(3) .front {
-webkit-animation-name: rotate-front-2;
animation-name: rotate-front-2;
}
.wrapper:nth-child(3) .back {
-webkit-animation-name: rotate-back-2;
animation-name: rotate-back-2;
}
.wrapper:nth-child(3) .top {
-webkit-animation-name: rotate-top-2;
animation-name: rotate-top-2;
}
.wrapper:nth-child(3) .bottom {
-webkit-animation-name: rotate-bottom-2;
animation-name: rotate-bottom-2;
}
.wrapper:nth-child(3) .left {
-webkit-animation-name: rotate-left-2;
animation-name: rotate-left-2;
}
.wrapper:nth-child(3) .right {
-webkit-animation-name: rotate-right-2;
animation-name: rotate-right-2;
}
.wrapper:nth-child(4) .front {
-webkit-animation-name: rotate-front-3;
animation-name: rotate-front-3;
}
.wrapper:nth-child(4) .back {
-webkit-animation-name: rotate-back-3;
animation-name: rotate-back-3;
}
.wrapper:nth-child(4) .top {
-webkit-animation-name: rotate-top-3;
animation-name: rotate-top-3;
}
.wrapper:nth-child(4) .bottom {
-webkit-animation-name: rotate-bottom-3;
animation-name: rotate-bottom-3;
}
.wrapper:nth-child(4) .left {
-webkit-animation-name: rotate-left-3;
animation-name: rotate-left-3;
}
.wrapper:nth-child(4) .right {
-webkit-animation-name: rotate-right-3;
animation-name: rotate-right-3;
}
@-webkit-keyframes rotate-front-0 {
0% {
-webkit-transform: perspective(1920px) translateX(-360px) translateZ(-150px) rotateX(-0deg) rotateY(0deg);
}
100% {
-webkit-transform: perspective(1920px) translateX(-360px) translateZ(-150px) rotateX(-360deg) rotateY(360deg);
}
}
@-webkit-keyframes rotate-back-0 {
0% {
-webkit-transform: perspective(1920px) translateX(-360px) translateZ(-150px) rotateX(180deg) rotateX(-0deg) rotateY(0deg);
}
100% {
-webkit-transform: perspective(1920px) translateX(-360px) translateZ(-150px) rotateX(180deg) rotateX(-360deg) rotateY(-360deg);
}
}
@-webkit-keyframes rotate-top-0 {
0% {
-webkit-transform: translateY(50px) perspective(1920px) translateX(-360px) translateZ(-150px) rotateX(90deg) rotateX(-0deg) rotateZ(-0deg);
}
100% {
-webkit-transform: translateY(50px) perspective(1920px) translateX(-360px) translateZ(-150px) rotateX(90deg) rotateX(-360deg) rotateZ(-360deg);
}
}
@-webkit-keyframes rotate-bottom-0 {
0% {
-webkit-transform: translateY(50px) perspective(1920px) translateX(-360px) translateZ(-150px) rotateX(-90deg) rotateX(-0deg) rotateZ(-0deg);
}
100% {
-webkit-transform: translateY(50px) perspective(1920px) translateX(-360px) translateZ(-150px) rotateX(-90deg) rotateX(-360deg) rotateZ(360deg);
}
}
@-webkit-keyframes rotate-left-0 {
0% {
-webkit-transform: translateX(-30px) perspective(1920px) translateX(-360px) translateZ(-150px) rotateY(-90deg) rotateZ(0deg) rotateY(0deg);
}
100% {
-webkit-transform: translateX(-30px) perspective(1920px) translateX(-360px) translateZ(-150px) rotateY(-90deg) rotateZ(360deg) rotateY(360deg);
}
}
@-webkit-keyframes rotate-right-0 {
0% {
-webkit-transform: translateX(-30px) perspective(1920px) translateX(-360px) translateZ(-150px) rotateY(90deg) rotateZ(0deg) rotateY(0deg);
}
100% {
-webkit-transform: translateX(-30px) perspective(1920px) translateX(-360px) translateZ(-150px) rotateY(90deg) rotateZ(-360deg) rotateY(360deg);
}
}
@-webkit-keyframes rotate-front-1 {
0% {
-webkit-transform: perspective(1920px) translateX(-120px) translateZ(-150px) rotateX(-0deg) rotateY(0deg);
}
100% {
-webkit-transform: perspective(1920px) translateX(-120px) translateZ(-150px) rotateX(-360deg) rotateY(360deg);
}
}
@-webkit-keyframes rotate-back-1 {
0% {
-webkit-transform: perspective(1920px) translateX(-120px) translateZ(-150px) rotateX(180deg) rotateX(-0deg) rotateY(0deg);
}
100% {
-webkit-transform: perspective(1920px) translateX(-120px) translateZ(-150px) rotateX(180deg) rotateX(-360deg) rotateY(-360deg);
}
}
@-webkit-keyframes rotate-top-1 {
0% {
-webkit-transform: translateY(50px) perspective(1920px) translateX(-120px) translateZ(-150px) rotateX(90deg) rotateX(-0deg) rotateZ(-0deg);
}
100% {
-webkit-transform: translateY(50px) perspective(1920px) translateX(-120px) translateZ(-150px) rotateX(90deg) rotateX(-360deg) rotateZ(-360deg);
}
}
@-webkit-keyframes rotate-bottom-1 {
0% {
-webkit-transform: translateY(50px) perspective(1920px) translateX(-120px) translateZ(-150px) rotateX(-90deg) rotateX(-0deg) rotateZ(-0deg);
}
100% {
-webkit-transform: translateY(50px) perspective(1920px) translateX(-120px) translateZ(-150px) rotateX(-90deg) rotateX(-360deg) rotateZ(360deg);
}
}
@-webkit-keyframes rotate-left-1 {
0% {
-webkit-transform: translateX(-30px) perspective(1920px) translateX(-120px) translateZ(-150px) rotateY(-90deg) rotateZ(0deg) rotateY(0deg);
}
100% {
-webkit-transform: translateX(-30px) perspective(1920px) translateX(-120px) translateZ(-150px) rotateY(-90deg) rotateZ(360deg) rotateY(360deg);
}
}
@-webkit-keyframes rotate-right-1 {
0% {
-webkit-transform: translateX(-30px) perspective(1920px) translateX(-120px) translateZ(-150px) rotateY(90deg) rotateZ(0deg) rotateY(0deg);
}
100% {
-webkit-transform: translateX(-30px) perspective(1920px) translateX(-120px) translateZ(-150px) rotateY(90deg) rotateZ(-360deg) rotateY(360deg);
}
}
@-webkit-keyframes rotate-front-2 {
0% {
-webkit-transform: perspective(1920px) translateX(120px) translateZ(-150px) rotateX(-0deg) rotateY(0deg);
}
100% {
-webkit-transform: perspective(1920px) translateX(120px) translateZ(-150px) rotateX(-360deg) rotateY(360deg);
}
}
@-webkit-keyframes rotate-back-2 {
0% {
-webkit-transform: perspective(1920px) translateX(120px) translateZ(-150px) rotateX(180deg) rotateX(-0deg) rotateY(0deg);
}
100% {
-webkit-transform: perspective(1920px) translateX(120px) translateZ(-150px) rotateX(180deg) rotateX(-360deg) rotateY(-360deg);
}
}
@-webkit-keyframes rotate-top-2 {
0% {
-webkit-transform: translateY(50px) perspective(1920px) translateX(120px) translateZ(-150px) rotateX(90deg) rotateX(-0deg) rotateZ(-0deg);
}
100% {
-webkit-transform: translateY(50px) perspective(1920px) translateX(120px) translateZ(-150px) rotateX(90deg) rotateX(-360deg) rotateZ(-360deg);
}
}
@-webkit-keyframes rotate-bottom-2 {
0% {
-webkit-transform: translateY(50px) perspective(1920px) translateX(120px) translateZ(-150px) rotateX(-90deg) rotateX(-0deg) rotateZ(-0deg);
}
100% {
-webkit-transform: translateY(50px) perspective(1920px) translateX(120px) translateZ(-150px) rotateX(-90deg) rotateX(-360deg) rotateZ(360deg);
}
}
@-webkit-keyframes rotate-left-2 {
0% {
-webkit-transform: translateX(-30px) perspective(1920px) translateX(120px) translateZ(-150px) rotateY(-90deg) rotateZ(0deg) rotateY(0deg);
}
100% {
-webkit-transform: translateX(-30px) perspective(1920px) translateX(120px) translateZ(-150px) rotateY(-90deg) rotateZ(360deg) rotateY(360deg);
}
}
@-webkit-keyframes rotate-right-2 {
0% {
-webkit-transform: translateX(-30px) perspective(1920px) translateX(120px) translateZ(-150px) rotateY(90deg) rotateZ(0deg) rotateY(0deg);
}
100% {
-webkit-transform: translateX(-30px) perspective(1920px) translateX(120px) translateZ(-150px) rotateY(90deg) rotateZ(-360deg) rotateY(360deg);
}
}
@-webkit-keyframes rotate-front-3 {
0% {
-webkit-transform: perspective(1920px) translateX(360px) translateZ(-150px) rotateX(-0deg) rotateY(0deg);
}
100% {
-webkit-transform: perspective(1920px) translateX(360px) translateZ(-150px) rotateX(-360deg) rotateY(360deg);
}
}
@-webkit-keyframes rotate-back-3 {
0% {
-webkit-transform: perspective(1920px) translateX(360px) translateZ(-150px) rotateX(180deg) rotateX(-0deg) rotateY(0deg);
}
100% {
-webkit-transform: perspective(1920px) translateX(360px) translateZ(-150px) rotateX(180deg) rotateX(-360deg) rotateY(-360deg);
}
}
@-webkit-keyframes rotate-top-3 {
0% {
-webkit-transform: translateY(50px) perspective(1920px) translateX(360px) translateZ(-150px) rotateX(90deg) rotateX(-0deg) rotateZ(-0deg);
}
100% {
-webkit-transform: translateY(50px) perspective(1920px) translateX(360px) translateZ(-150px) rotateX(90deg) rotateX(-360deg) rotateZ(-360deg);
}
}
@-webkit-keyframes rotate-bottom-3 {
0% {
-webkit-transform: translateY(50px) perspective(1920px) translateX(360px) translateZ(-150px) rotateX(-90deg) rotateX(-0deg) rotateZ(-0deg);
}
100% {
-webkit-transform: translateY(50px) perspective(1920px) translateX(360px) translateZ(-150px) rotateX(-90deg) rotateX(-360deg) rotateZ(360deg);
}
}
@-webkit-keyframes rotate-left-3 {
0% {
-webkit-transform: translateX(-30px) perspective(1920px) translateX(360px) translateZ(-150px) rotateY(-90deg) rotateZ(0deg) rotateY(0deg);
}
100% {
-webkit-transform: translateX(-30px) perspective(1920px) translateX(360px) translateZ(-150px) rotateY(-90deg) rotateZ(360deg) rotateY(360deg);
}
}
@-webkit-keyframes rotate-right-3 {
0% {
-webkit-transform: translateX(-30px) perspective(1920px) translateX(360px) translateZ(-150px) rotateY(90deg) rotateZ(0deg) rotateY(0deg);
}
100% {
-webkit-transform: translateX(-30px) perspective(1920px) translateX(360px) translateZ(-150px) rotateY(90deg) rotateZ(-360deg) rotateY(360deg);
}
}
@keyframes rotate-front-0 {
0% {
transform: perspective(1920px) translateX(-360px) translateZ(-150px) rotateX(-0deg) rotateY(0deg);
}
100% {
transform: perspective(1920px) translateX(-360px) translateZ(-150px) rotateX(-360deg) rotateY(360deg);
}
}
@keyframes rotate-back-0 {
0% {
transform: perspective(1920px) translateX(-360px) translateZ(-150px) rotateX(180deg) rotateX(-0deg) rotateY(0deg);
}
100% {
transform: perspective(1920px) translateX(-360px) translateZ(-150px) rotateX(180deg) rotateX(-360deg) rotateY(-360deg);
}
}
@keyframes rotate-top-0 {
0% {
transform: translateY(50px) perspective(1920px) translateX(-360px) translateZ(-150px) rotateX(90deg) rotateX(-0deg) rotateZ(-0deg);
}
100% {
transform: translateY(50px) perspective(1920px) translateX(-360px) translateZ(-150px) rotateX(90deg) rotateX(-360deg) rotateZ(-360deg);
}
}
@keyframes rotate-bottom-0 {
0% {
transform: translateY(50px) perspective(1920px) translateX(-360px) translateZ(-150px) rotateX(-90deg) rotateX(-0deg) rotateZ(-0deg);
}
100% {
transform: translateY(50px) perspective(1920px) translateX(-360px) translateZ(-150px) rotateX(-90deg) rotateX(-360deg) rotateZ(360deg);
}
}
@keyframes rotate-left-0 {
0% {
transform: translateX(-30px) perspective(1920px) translateX(-360px) translateZ(-150px) rotateY(-90deg) rotateZ(0deg) rotateY(0deg);
}
100% {
transform: translateX(-30px) perspective(1920px) translateX(-360px) translateZ(-150px) rotateY(-90deg) rotateZ(360deg) rotateY(360deg);
}
}
@keyframes rotate-right-0 {
0% {
transform: translateX(-30px) perspective(1920px) translateX(-360px) translateZ(-150px) rotateY(90deg) rotateZ(0deg) rotateY(0deg);
}
100% {
transform: translateX(-30px) perspective(1920px) translateX(-360px) translateZ(-150px) rotateY(90deg) rotateZ(-360deg) rotateY(360deg);
}
}
@keyframes rotate-front-1 {
0% {
transform: perspective(1920px) translateX(-120px) translateZ(-150px) rotateX(-0deg) rotateY(0deg);
}
100% {
transform: perspective(1920px) translateX(-120px) translateZ(-150px) rotateX(-360deg) rotateY(360deg);
}
}
@keyframes rotate-back-1 {
0% {
transform: perspective(1920px) translateX(-120px) translateZ(-150px) rotateX(180deg) rotateX(-0deg) rotateY(0deg);
}
100% {
transform: perspective(1920px) translateX(-120px) translateZ(-150px) rotateX(180deg) rotateX(-360deg) rotateY(-360deg);
}
}
@keyframes rotate-top-1 {
0% {
transform: translateY(50px) perspective(1920px) translateX(-120px) translateZ(-150px) rotateX(90deg) rotateX(-0deg) rotateZ(-0deg);
}
100% {
transform: translateY(50px) perspective(1920px) translateX(-120px) translateZ(-150px) rotateX(90deg) rotateX(-360deg) rotateZ(-360deg);
}
}
@keyframes rotate-bottom-1 {
0% {
transform: translateY(50px) perspective(1920px) translateX(-120px) translateZ(-150px) rotateX(-90deg) rotateX(-0deg) rotateZ(-0deg);
}
100% {
transform: translateY(50px) perspective(1920px) translateX(-120px) translateZ(-150px) rotateX(-90deg) rotateX(-360deg) rotateZ(360deg);
}
}
@keyframes rotate-left-1 {
0% {
transform: translateX(-30px) perspective(1920px) translateX(-120px) translateZ(-150px) rotateY(-90deg) rotateZ(0deg) rotateY(0deg);
}
100% {
transform: translateX(-30px) perspective(1920px) translateX(-120px) translateZ(-150px) rotateY(-90deg) rotateZ(360deg) rotateY(360deg);
}
}
@keyframes rotate-right-1 {
0% {
transform: translateX(-30px) perspective(1920px) translateX(-120px) translateZ(-150px) rotateY(90deg) rotateZ(0deg) rotateY(0deg);
}
100% {
transform: translateX(-30px) perspective(1920px) translateX(-120px) translateZ(-150px) rotateY(90deg) rotateZ(-360deg) rotateY(360deg);
}
}
@keyframes rotate-front-2 {
0% {
transform: perspective(1920px) translateX(120px) translateZ(-150px) rotateX(-0deg) rotateY(0deg);
}
100% {
transform: perspective(1920px) translateX(120px) translateZ(-150px) rotateX(-360deg) rotateY(360deg);
}
}
@keyframes rotate-back-2 {
0% {
transform: perspective(1920px) translateX(120px) translateZ(-150px) rotateX(180deg) rotateX(-0deg) rotateY(0deg);
}
100% {
transform: perspective(1920px) translateX(120px) translateZ(-150px) rotateX(180deg) rotateX(-360deg) rotateY(-360deg);
}
}
@keyframes rotate-top-2 {
0% {
transform: translateY(50px) perspective(1920px) translateX(120px) translateZ(-150px) rotateX(90deg) rotateX(-0deg) rotateZ(-0deg);
}
100% {
transform: translateY(50px) perspective(1920px) translateX(120px) translateZ(-150px) rotateX(90deg) rotateX(-360deg) rotateZ(-360deg);
}
}
@keyframes rotate-bottom-2 {
0% {
transform: translateY(50px) perspective(1920px) translateX(120px) translateZ(-150px) rotateX(-90deg) rotateX(-0deg) rotateZ(-0deg);
}
100% {
transform: translateY(50px) perspective(1920px) translateX(120px) translateZ(-150px) rotateX(-90deg) rotateX(-360deg) rotateZ(360deg);
}
}
@keyframes rotate-left-2 {
0% {
transform: translateX(-30px) perspective(1920px) translateX(120px) translateZ(-150px) rotateY(-90deg) rotateZ(0deg) rotateY(0deg);
}
100% {
transform: translateX(-30px) perspective(1920px) translateX(120px) translateZ(-150px) rotateY(-90deg) rotateZ(360deg) rotateY(360deg);
}
}
@keyframes rotate-right-2 {
0% {
transform: translateX(-30px) perspective(1920px) translateX(120px) translateZ(-150px) rotateY(90deg) rotateZ(0deg) rotateY(0deg);
}
100% {
transform: translateX(-30px) perspective(1920px) translateX(120px) translateZ(-150px) rotateY(90deg) rotateZ(-360deg) rotateY(360deg);
}
}
@keyframes rotate-front-3 {
0% {
transform: perspective(1920px) translateX(360px) translateZ(-150px) rotateX(-0deg) rotateY(0deg);
}
100% {
transform: perspective(1920px) translateX(360px) translateZ(-150px) rotateX(-360deg) rotateY(360deg);
}
}
@keyframes rotate-back-3 {
0% {
transform: perspective(1920px) translateX(360px) translateZ(-150px) rotateX(180deg) rotateX(-0deg) rotateY(0deg);
}
100% {
transform: perspective(1920px) translateX(360px) translateZ(-150px) rotateX(180deg) rotateX(-360deg) rotateY(-360deg);
}
}
@keyframes rotate-top-3 {
0% {
transform: translateY(50px) perspective(1920px) translateX(360px) translateZ(-150px) rotateX(90deg) rotateX(-0deg) rotateZ(-0deg);
}
100% {
transform: translateY(50px) perspective(1920px) translateX(360px) translateZ(-150px) rotateX(90deg) rotateX(-360deg) rotateZ(-360deg);
}
}
@keyframes rotate-bottom-3 {
0% {
transform: translateY(50px) perspective(1920px) translateX(360px) translateZ(-150px) rotateX(-90deg) rotateX(-0deg) rotateZ(-0deg);
}
100% {
transform: translateY(50px) perspective(1920px) translateX(360px) translateZ(-150px) rotateX(-90deg) rotateX(-360deg) rotateZ(360deg);
}
}
@keyframes rotate-left-3 {
0% {
transform: translateX(-30px) perspective(1920px) translateX(360px) translateZ(-150px) rotateY(-90deg) rotateZ(0deg) rotateY(0deg);
}
100% {
transform: translateX(-30px) perspective(1920px) translateX(360px) translateZ(-150px) rotateY(-90deg) rotateZ(360deg) rotateY(360deg);
}
}
@keyframes rotate-right-3 {
0% {
transform: translateX(-30px) perspective(1920px) translateX(360px) translateZ(-150px) rotateY(90deg) rotateZ(0deg) rotateY(0deg);
}
100% {
transform: translateX(-30px) perspective(1920px) translateX(360px) translateZ(-150px) rotateY(90deg) rotateZ(-360deg) rotateY(360deg);
}
}
Preserve 3d not working on ie11
Internet Explorer doesn't support preserve-3d in any version (probably Spartan will).
You need to change the way you have set the transforms if you want it to work (on the item directly instead of the container)
.container{ perspective: 1500px;}.canvas{ position: relative; width: 300px; transform-origin: 50% 50% 0; transform-style: preserve-3d; overflow: visible;}.canvas img{ max-width: 100%; backface-visibility: hidden; position: relative; z-index: 2; transition: transform 1s ease 0s;}input:checked + .canvas img { transform: rotateY(180deg);}.red{ background: red; width: 100%; height: 100%; position: absolute; top:0; left:0; z-index: 1; backface-visibility: hidden; transform: rotateY(180deg); transition: transform 1s ease 0s;}input:checked + .canvas .red { transform: rotateY(360deg);}
<div class="container"> <input type="checkbox"> <div class="canvas"> <img src="http://todofondosdeamor.com/wp-content/uploads/images/48/gatitos-1__400x300.jpg"> <div class="red"></div> </div></div><p>That checkbox over there</p>
Highchart renderer image rotation is not working in IE10
You can use attr() and rotation paramter: http://jsfiddle.net/peZfm/3/
chart.renderer.image('http://graphs2.stormgeo.com/Images/Arrows/layout%202/0/test.png', 100, 100, 30, 30) .attr({
rotation:40
})
.add();
IE10 prevent selection on elements at onTouch(-ms-touch-action)
Try the following
Special meta tag
<meta name="msapplication-tap-highlight" content="no" />
and also the following style
a:active{background-color:transparent !important;}
Related Topics
CSS Background Gradient with Offset
Mobile Safari Text Input Width Bug
How to Set Different Duration/Delay for Transform Options
Default CSS Filter Values for Brightness and Contrast
Unwanted CSS Injected into Posts
Flex-Flow: Column Wrap. How to Set Container's Width Equal to Content
CSS: Link and: Visited Pseudo-Classes - Are Web Browsers Adhering to The Spec
How to Use CSS to Justify Text with Hyphenating Words at The End of a Line
Configuring Compass on Windows
Does Repeating a Classname in a CSS Rule Increase Its Priority
CSS Transition - Two Directions
How to Configure Webpack to Use Compass in My Project
Loading Global SASS Files in Multiple Compass Projects
Data-Uri Svg Background in CSS Not Working in Firefox
CSS3 /CSS - Spinning Background Image
Webkit CSS Pseudo Elements for Time Field
Strange Border-Width Behavior in Chrome - Floating Point Border-Width