Menu
As i understand it is probably how it looks is perspective, and how it actually moves around in its space is origin.
I am more clear on transform origin and not so much on perspective origin.
Could someone give me links or explanation what perspective it and how origin matters.
671
The perspective-origin CSS property determines the position at which the viewer is looking. It is used as the vanishing point by the perspective property.
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 transform origin is the point around which a transformation is applied. For example, the transform origin of the rotate() function is the center of rotation. In effect, this property wraps a pair of translations around the element's other transformations.
Definition and Usage The transform-origin property allows you to change the position of transformed elements. 2D transformations can change the x- and y-axis of an element. 3D transformations can also change the z-axis of an element. To better understand the transform-origin property, view a demo.
perspective is used to set the view angle for a element's children.
perspective origin is the point in space from where you are looking at the element
transform is the simple coordinate thing which is used to rotate/translate object(element).
transform origin sets the point about which you are translating/rotating an object.
for an instance you want to rotate an div at 45 degrees about x-axis(horizontal axis).
you use transform:rotateX(45deg);
div will rotate but you still see a rectangle on screen as you are looking at it from z axis with no perspective.
but when you increase perspective, you will see the 3d view of the div.
the center of your eye is set by perspective-origin.
default value is 50% 50% means center.
increasing and decreasing x or y value will move your "eye" accordingly.
transform origin on the other hand sets the point of transform for example if you need to rotate an rectangle about any other point other than its center, the you will use transform-origin property
133
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
