Menu
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?
<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> 
981
transform-origin changes the point at which the element transforms rather than moving the entire element (as translate would). The default value is transform-origin: 50% 50%; .
The -webkit-transform-origin property establishes the origin for transforms applied to an element with respect to its border box. The values may be expressed either as a CSS length unit or as a percentage of the element's size. For example, a value of 50% 50% causes transformations to occur around the element's center.
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/
53
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
