Menu
I am testing CSS3 3D Transform in Safari, but I found that the 3D model is far from my knowledge. After consulting the Holy W3C Document, i discovered all transform rules in CSS3 will be translated to transform matrix which is similar to the one used in SVG standards : http://www.w3.org/TR/SVG/coords.html#TranslationDefined OMG, I am not good at math. Is there anybody who can explain to me how to understand the behavior of transform functions such as rotateX, perspective, etc
821
The perspective() CSS function defines a transformation that sets the distance between the user and the z=0 plane, the perspective from which the viewer would be if the 2-dimensional interface were 3-dimensional. Its result is a <transform-function> data type.
The perspective property defines how many pixels a 3D element is placed from the view. This property allows you to change the perspective on how 3D elements are viewed.
There are a number of three-dimensional properties to leverage, for one, users understand how many faces a three-dimensional object has. A flipping card implies only two sides exist. A box rotating along one axis implies four. Additionally, users know how to interface with different 3D objects.
I've generally found I have not needed the actual transformation matrix for anything I've done. Use the individual properties instead. I use http://developer.apple.com/library/safari/#documentation/InternetWeb/Conceptual/SafariVisualEffectsProgGuide/Transforms/Transforms.html as documentation.
150
I have written some tuts and demos on CSS 3D transforms including CSS3 3D matrix-transforms: http://www.eleqtriq.com
41
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
