26

I've been building a prism rotation effect using 3D transforms. The transform-origin-z property seemed best for transforming the faces of the prism, but Safari 5 and Mobile Safari inexplicably stretch my element, even when no transform is applied. Firefox 12 and Chrome 18 work correctly.

Live Demo

Full Prism Demo

I'm interested in understanding why this happens. Should I avoid transform-origin-z entirely, or is there some workaround for Safari and Mobile Safari?

Screen shot

<style>
  /* other browser prefixes omitted for brevity */
  .container {
    margin: 50px;
    border: 2px solid #00f;
    height: 50px;
    -webkit-perspective: 500px;
  }
  .face {
    height: 50px;
    background-color: rgba(255,0,0,0.5);
    -webkit-transform-origin: center center -25px;
    -webkit-transform: translate3d(0,0,0);
  }
</style>

<div class="container">
  <div class="face"></div>
</div>​
4
  • Just to be sure what you mean: is the question, what the last -25px in the value actually does?
    – Daniel
    Apr 26, 2012 at 23:18
  • 1
    No, I understand what it does. I don't understand why it behaves incorrectly in Safari or how to fix it. transform-origin should have no effect when no transform is applied, according to the spec.
    – Matthew
    Apr 28, 2012 at 17:19
  • Seeing same bug with some css 3d transforms.
    – Gleno
    Nov 3, 2012 at 11:18
  • I came across this before too - I switched to using a translate-z, rotate, translate-z back sequence to ensure consistency between browsers, although I never came to a conclusion as to which browser's behaviour was correct.
    – CupawnTae
    Nov 4, 2012 at 11:21

3 Answers 3

15

it seems like this is a bug in Safari. Chrome moves the transformation-center over the Z-axis, Safari leaves this center were it was, but moves the object itself over the Z-axis. The object therefore is zoomed in Safari, and seems bigger.

I would avoid the transform-origin (on Z-axis) for now and work with translate-Z to produce the same effect.

Example:

http://jsfiddle.net/willemvb/GuhcC/3/

1
  • 1
    I ran into the same issue. Your example helped me out alot. Thanks.
    – Mathias
    Feb 7, 2013 at 18:06
2

I believe the following explanation answers the "why" Safari is doing what it is

I do not have access to Safari for testing, but as I read the specifications for the perspective property (the same spec page you point to), it states:

The ‘perspective’ property applies the same transform as the perspective() transform function, except that it applies only to the positioned or transformed children of the element, not to the transform on the element itself.


Update on how I read the above spec

The ‘perspective’ property applies the same transform as the perspective() transform function

This tells me a perspective transform is going to be done just as if transform: perspective(500px) were applied in this case.

except that it applies only to the positioned or transformed children of the element

This tells me the perspective transform is going to be applied to child elements, in this case .face. Here, there seems to be some ambiguity. Is this saying the perspective should only be applied if another transform is done on the child element? And, does the tranform-origin property count as a transform being done to the child (especially since it is this value that relates directly to the perspective transform)? It is at this point of ambiguity that the browsers seem to differ. Safari is doing the perspective transform because the child element has tranform-origin set to -25px, whereas the others apparently are not (at least, not until the actual other transform does something else to the .face during the animation).

not to the transform on the element itself

This tells me the z=0 of .container is irrelevant, because the transform from this property is not affecting .container, but rather .container's children (i.e. .face).


So Safari appears to be taking the position that your .face always has a transform applied because you have set .container to have -webkit-perspective: 500px;, so there is always a perspective transform being applied to the child elements (.face in your case).

Note that if you take away the animation, and apply an actual transform: perspective(500px) to the .face you will see the same result in Firefox or Chrome as what you experience in Safari with your code.

So I think actually, Safari may be doing it correctly, and Firefox and Chrome perhaps are not. The spec has some ambiguity. The other two browsers perhaps should be still applying the perspective transform based off .container like Safari does, but certainly appear to not be, whereas Safari obviously appears to be.

To eliminate the issue (not have it "stick out" when "at rest"), you probably need to

  1. Animate the transform-origin itself at the beginning of your animation (and reset to 0 afterwards), OR...
  2. Animate the perspective value itself to be 0 when "at rest" and 500px when animating.

My guess is #1 will be easier to implement, but I don't know for sure.

5
  • I don't think that's it. "Perspective" describes how translation along the Z axis skews an element. It should have no impact if the element is sitting on the plane where z = 0. A large "perspective" is analogous to a telephoto lens.
    – Matthew
    May 8, 2012 at 21:39
  • @Matthew--I think you missed my point. It is not sitting on a plane of z=0 (I agree with you on that), it is on a plane of z=-25px based on -webkit-transform-origin on .face, so the parent element's perspective call of 500px is causing .face to transform based upon that. The container may be at z=0 but the perspective does not affect the container but the container's children per the spec. And the child has a non-zero z value.
    – ScottS
    May 8, 2012 at 22:22
  • @Matthew--what is a bit ambiguous to me regarding the spec (and what may be the reason for difference in browsers) is whether the perspective should only apply if another transform is present, or if it should in fact do the perspective transform on a child element if no other transform is present other than the z shift.
    – ScottS
    May 8, 2012 at 22:27
  • @Matthew--one other thing, did you look at my second fiddle link that reproduced the same thing you are seeing in Webkit in Firefox (by explicitly setting the perspective transform on .face)?
    – ScottS
    May 8, 2012 at 22:34
  • @Matthew--I added an update in my answer that essentially summarizes what I just wrote in comments above, and also emphasized (bolded) the second fiddle link that reproduces the effect in Firefox.
    – ScottS
    May 8, 2012 at 23:02
2

I don't know why this worked for me. Seem to work on all browsers. Basically I think I am canceling the css declarations effect.

.container {
   perspective: 500px;
   transform-origin: 50% 50% 25px;
}
1
  • this saved me from hours of frustration
    – raptoria7
    Aug 26, 2020 at 2:43

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.