HTML and CSS Reference
In-Depth Information
<div style="height:100px;width:180px;background-color:red;" >No perspective
set.
<div style="height:50px;width:100px;background-color:blue;-webkit-
transform:rotateY(55deg);">
No perspective used.
</div>
</div>
Compatibility
CSS3
Safari 4+
Notes
• WebKit supports this property as
-webkit-perspective
, though it is currently
only available in the iPhone and the development builds of Safari 4+ on Macs.
• This property only works in conjunction with another transform because it alters
the way the other transform acts.
perspective-origin
This property is used to set the x and y origins for the
-webkit-perspective
property.
Syntax
perspective-origin:
percentage
|
length
| left | center | right [
percentage
|
length
| top | center | bottom ]
where the default value is 50% 50%.
Example
<div style="height:200px;width:200px;background-color:red;
-webkit-perspective:200;-webkit-perspective-origin:right bottom;">
Perspective set.
<div style="position: relative;left: 50px;top: 50px;height:50px;
