14

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

sandeep
  • 91,313
  • 23
  • 137
  • 155
manyu
  • 475
  • 2
  • 6
  • 12
  • 1
    Unfortunately any `filter` or `backdrop-filter` styles on the parent which has `transform: perspective(...)` prevents `preserve-3d` from working – vsync Jun 05 '21 at 17:10
  • Alas — I'm finding it's not working even without overflow:hidden or any filters on the parent element. – mhjb Mar 02 '22 at 01:10

3 Answers3

27

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.

Max
  • 467
  • 4
  • 8
5

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!

Soft Bullets
  • 4,425
  • 2
  • 18
  • 15
1

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!

Christofer Vilander
  • 17,232
  • 6
  • 31
  • 26
  • it is still not working, thanks for your help anyway. Can you explain me the logic behind your approach of setting -webkit-backface-visibility: hidden and how you thought that it may do the things right in my case – manyu Jul 27 '12 at 07:17
  • Sure. In my case, when I ran your code in Chrome the background-image was always visible, even after the transition (I saw two coins), but based on your answer now I guess you didn’t have the same problem? Adding -webkit-backface-visibility: hidden; solved it for me. When you run the code in your codebase, what exactly isn’t working? You’ve done a really cool effect, so it would be nice if we could solve it. – Christofer Vilander Jul 27 '12 at 07:41
  • Ya you guessed it right I was not facing the problem u had faced, when i am using it in my code base the preserve-3d property doesn't seem to work the element just seemed to be flattened all the time. Please go on the link in question to w3c.org to see what they have written about the preserve-3d property, i think some other property is over loading this preserve-3d property but I don't know for sure if this is the problem. – manyu Jul 27 '12 at 11:18
  • I'll read the w3c post and get back to you if I come up with a solution. – Christofer Vilander Jul 28 '12 at 08:37
  • When I look at your first example (code_on_jsfiddle) in Safari it works fine, but in Chrome, as mentioned above, the background-image is visible all the time, but the rotation is working. I'm using Chrome 20.0.1132.57 and Safari 5.1.7 OS X. – Christofer Vilander Jul 28 '12 at 08:49
  • This fixed it for me! (iPhone SE - OS v13.5.1) – Justin Breen Mar 25 '22 at 00:30