While perspective and perspective-origin are both set on an element’s parent container and determine the position of the vanishing point (i.e. The bigger the value, the further aside it will look.ĬodePen Embed Fallback The transformation When the origin is set to the side, it’s like you are “looking” at the object from that side. If the origin is centered (which is the default) and the object is moved to the right, it will seem like you are looking at it from the left (and vice versa).Īlternatively, you can leave the object centered and move the perspective-origin. The perspective-origin property determines the position from which you are “looking” at an object. The bigger the value, the further you are from the object the smaller the value, the more noticeable the perspective will be. This value sets the distance from the object’s plane, or in other words, the perspective’s strength. We need to set the perspective property with a value. Again, this is happening because we can’t add depth to an object, and at this position the square’s width (or height) will actually be 0. Note that when the rotation of the object on the X or Y axes is at 90° (or 270°, 450°, 630°, and so on) it will “disappear” from view. But when we add perspective, we can see that when the square is rotating, the closer side of the square seems bigger, and the further side looks smaller, and the rotation looks as expected. Rotating the square on the Z axis looks like the regular rotation we all know and love, but when we rotate the square on the X or Y axes (without using perspective), it only looks like the square is getting smaller (or narrower) rather than rotating.
0 kommentar(er)
