CODEWITHSUNDEEP
csswebkit
manyu
manyu

Reputation: 485

-webkit-transform-style: preserve-3d not working

I am trying to use an effect on this link code_on_jsfiddle . The effect is to show the thickness of the coin as it rotates. Code seems to work fine on the jsfiddle but when I tried using it in my codebase it just doesn't work. Please someone suggest me various scenarios where preserve-3d might not work or can there be come other problem.

I tried to find out what the problem can be and I came across link at w3c.org where is written that "so preserving a hierarchy of elements in 3D space requires that each ancestor in the hierarchy have the value ‘preserve-3d’ for ‘transform-style" so I thought that may be any of my ancestor div might not have preserve-3d style but when I tried to simulate such a situation where an ancestor is nor having the preserve-3d style even than the required transition is working link. Use webkit to see the transition on hover. Please help

Upvotes: 14

Views: 21026

Answers (4)

adriaan
adriaan

Reputation: 1118

Maybe add something like perspective: 1000px;.

https://developer.mozilla.org/en-US/docs/Web/CSS/perspective

Upvotes: 0

Soft Bullets
Soft Bullets

Reputation: 5095

I found that a filter effect on the parent element was causing preserve-3d to be ignored.

I was using filter: blur() to gradually blur items as they rotated "away" from the viewer.

Moving the filter the child element fixed the problem!

Upvotes: 5

Max
Max

Reputation: 477

I ran into this same problem. preserve-3d doesn't seem to have an effect in certain deeply nested sections of code. After tweaking all the parent elements, I found the culprit!

overflow: hidden

this line flattens everything.

You can try it here. http://www.webkit.org/blog-files/3d-transforms/transform-style.html If you add overflow: hidden to the parent class, preserve-3d will stop having any effect.

.parent {
    overflow: visible !important;
    transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;
}

should solve the problem.

Upvotes: 28

Christofer Vilander
Christofer Vilander

Reputation: 18022

Try this - jsFiddle

What I've done: 

.coin {
    background-image: url("http://www.coolemails4u.com/wp-content/uploads/2010/10/indian_rupee.png");
    background-size: 100% 100%;
    border-radius: 100%;
    height: 100px;
    margin: 50px auto;
    position: relative;
    width: 100px;
    -webkit-transition: .5s linear;
    -webkit-transform-style: preserve-3d;
    -webkit-backface-visibility: hidden; /* I added this */
}

I hope that helps!

Upvotes: 1

Related Questions