{"id":17444,"date":"2012-07-09T12:16:45","date_gmt":"2012-07-09T19:16:45","guid":{"rendered":"http:\/\/css-tricks.com\/?page_id=17444"},"modified":"2021-08-04T08:31:53","modified_gmt":"2021-08-04T15:31:53","slug":"perspective","status":"publish","type":"page","link":"https:\/\/css-tricks.com\/almanac\/properties\/p\/perspective\/","title":{"rendered":"perspective"},"content":{"rendered":"\n<p>The <code>perspective<\/code> CSS property gives an element a 3D-space by affecting the distance between the Z plane and the user.<\/p>\n\n\n\n<p>The strength of the effect is determined by the value. The smaller the value, the closer you get from the Z plane and the more impressive the visual effect. The greater the value, the more subtle will be the effect.<\/p>\n\n\n\n<p><strong>Important:<\/strong> Please note the perspective property doesn&#8217;t affect how the element is rendered; it simply enables a 3D-space for children elements. This is the main difference between the <code>transform: perspective()<\/code> function and the <code>perspective<\/code> property. The first gives element depth while the later creates a 3D-space shared by all its transformed children.<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"2\"><code markup=\"tt\">.parent {\n  perspective: 1000px;\n}\n\n.child {\n  transform: rotateY(50deg);\n}<\/code><\/pre>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_JImvb\" src=\"\/\/codepen.io\/anon\/embed\/JImvb?height=450&amp;theme-id=1&amp;slug-hash=JImvb&amp;default-tab=result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed JImvb\" title=\"CodePen Embed JImvb\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>The above demo aims at showing the difference between the function and the property.<\/p>\n\n\n\n<ul><li>On the left side, you can see the property applied to the parent (<code>perspective: 50em<\/code>) of transformed elements (<code>transform: rotateY(50deg)<\/code>).<\/li><li>On the right side, the perspective is applied from the transform directly on children (<code>transform: perspective(50em) rotateY(50deg)<\/code>).<\/li><\/ul>\n\n\n\n<p>This shows how setting perspective on the parent make all children share the same 3D-space and thus the same vanishing point.<\/p>\n\n\n\n<p>Let&#8217;s try something even cooler: a cube with 3D transforms and perspective.<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_GLbca\" src=\"\/\/codepen.io\/anon\/embed\/GLbca?height=450&amp;theme-id=1&amp;slug-hash=GLbca&amp;default-tab=result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed GLbca\" title=\"CodePen Embed GLbca\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>Here is how the cube is made: it relies on two nested wrappers (one to give the cube perspective and one to wrap all the sides) and 6 elements to make the sides. Each element is given its own transform mixing translating and rotating in the 3D-space (e.g. <code>transform: rotateX(90deg)  translateZ(1em)<\/code>).<\/p>\n\n\n\n<p>Let&#8217;s finish with a demo featuring what could be the base of a real world design: a wall of photographs + captions using perspective and transform.<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_fvopl\" src=\"\/\/codepen.io\/anon\/embed\/fvopl?height=450&amp;theme-id=1&amp;slug-hash=fvopl&amp;default-tab=result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed fvopl\" title=\"CodePen Embed fvopl\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>When hovering over the wall, the children are rotated back to their normal position, cancelling the effect.<\/p>\n\n\n\n<p class=\"is-style-explanation\"><strong>Important!<\/strong> Using <strong><code>perspective<\/code><\/strong> (with a value different from 0 or none) creates a new stacking context.<\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"h-syntax\">Syntax<\/h3>\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">perspective: none | &lt;length>;<\/code><\/pre>\n\n\n\n<ul class=\"ticss-133138bc\"><li><strong>Initial value:<\/strong> <code>none<\/code><\/li><li><strong>Applies to:<\/strong> transformable elements<\/li><li><strong>Inherited:<\/strong> no<\/li><li><strong>Percentages:<\/strong> n\/a<\/li><li><strong>Computed value:<\/strong> the keyword <code>none<\/code> or an absolute length<\/li><li><strong>Animation type:<\/strong> by computed value<\/li><\/ul>\n\n\n<h3 class=\"wp-block-heading\" id=\"h-values\">Values<\/h3>\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">\/* Keyword value *\/\nperspective: none;\n\n\/* Length values *\/\nperspective: 10px;\nperspective: 2rem;\n\n\/* Global values *\/\nperspective: inherit;\nperspective: initial;\nperspecive: revert;\nperspective: unset;<\/code><\/pre>\n\n\n<h3 class=\"wp-block-heading\" id=\"browser-support\">Browser support<\/h3>\n\n\n<figure class=\"wp-block-table ticss-2969c85c\"><table class=\"has-fixed-layout\"><thead><tr><th class=\"has-text-align-center\" data-align=\"center\">IE<\/th><th class=\"has-text-align-center\" data-align=\"center\">Edge<\/th><th class=\"has-text-align-center\" data-align=\"center\">Firefox<\/th><th class=\"has-text-align-center\" data-align=\"center\">Chrome<\/th><th class=\"has-text-align-center\" data-align=\"center\">Safari<\/th><th class=\"has-text-align-center\" data-align=\"center\">Opera<\/th><\/tr><\/thead><tbody><tr><td class=\"has-text-align-center\" data-align=\"center\">10<\/td><td class=\"has-text-align-center\" data-align=\"center\">All<\/td><td class=\"has-text-align-center\" data-align=\"center\">10 <sup>1<\/sup><\/td><td class=\"has-text-align-center\" data-align=\"center\">12 <sup>2<\/sup><\/td><td class=\"has-text-align-center\" data-align=\"center\">4 <sup>2<\/sup><\/td><td class=\"has-text-align-center\" data-align=\"center\">15 <sup>2<\/sup><\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<figure class=\"wp-block-table ticss-1679a4e0\"><table class=\"has-fixed-layout\"><thead><tr><th class=\"has-text-align-center\" data-align=\"center\">Android Chrome<\/th><th class=\"has-text-align-center\" data-align=\"center\">Android Firefox<\/th><th class=\"has-text-align-center\" data-align=\"center\">Android Browser<\/th><th class=\"has-text-align-center\" data-align=\"center\">iOS Safari<\/th><th class=\"has-text-align-center\" data-align=\"center\">Opera Mobile<\/th><\/tr><\/thead><tbody><tr><td class=\"has-text-align-center\" data-align=\"center\">All<\/td><td class=\"has-text-align-center\" data-align=\"center\">All<\/td><td class=\"has-text-align-center\" data-align=\"center\">3 <sup>2<\/sup><\/td><td class=\"has-text-align-center\" data-align=\"center\">3.2 <sup>2<\/sup><\/td><td class=\"has-text-align-center\" data-align=\"center\">62<\/td><\/tr><\/tbody><\/table><figcaption>Source: <a href=\"https:\/\/caniuse.com\/mdn-css_properties_perspective\" rel=\"noopener\">caniuse<\/a><br><br><sup>1<\/sup> Firefox 10-15 supported with prefix <code>-moz-<\/code><br><sup>2<\/sup> Chrome 12-35, Safari 4-8, Safari iOS 3.2-8.4, Opera 3.2, and Android Browser 3-4.4.4 supported with prefix <code>-webkit-<\/code><\/figcaption><\/figure>\n","protected":false},"excerpt":{"rendered":"<p>The perspective CSS property gives an element a 3D-space by affecting the distance between the Z plane and the user. The strength of the effect is determined by the value. The smaller the value, the closer you get from the Z plane and the more impressive the visual effect. The greater the value, the more [&hellip;]<\/p>\n","protected":false},"author":3,"featured_media":0,"parent":13941,"menu_order":0,"comment_status":"open","ping_status":"closed","template":"page-almanac-single.php","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"footnotes":""},"tags":[],"acf":[],"jetpack-related-posts":[{"id":17446,"url":"https:\/\/css-tricks.com\/almanac\/properties\/p\/perspective-origin\/","url_meta":{"origin":17444,"position":0},"title":"perspective-origin","date":"July 9, 2012","format":false,"excerpt":"The perspective-origin property determines the origin for the perspective property. Think of it as the vanishing point of the current 3D-space. Note as for the perspective property, perspective-origin has to be defined on the parent element in order to give the transformed children depth. The perspective-origin property doesn't do anything\u2026","rel":"","context":"In \"3d\"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":14123,"url":"https:\/\/css-tricks.com\/almanac\/properties\/t\/transform\/","url_meta":{"origin":17444,"position":1},"title":"transform","date":"September 6, 2011","format":false,"excerpt":"The transform property allows you to visually manipulate an element by skewing, rotating, translating, or scaling: .element { width: 20px; height: 20px; transform: scale(20); } Even with a declared height and width, this element will now be scaled to twenty times its original size: CodePen Embed Fallback Giving this function\u2026","rel":"","context":"With 57 comments","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":250613,"url":"https:\/\/css-tricks.com\/snippets\/css\/star-wars-crawl-text\/","url_meta":{"origin":17444,"position":2},"title":"Star Wars Crawl Text","date":"January 31, 2017","format":false,"excerpt":"The opening to Star Wars is iconic. The effect of text scrolling both up and away from the screen was both a crazy cool special effect for a movie back in 1977 and a cool typographical style that was brand new at the time. We can achieve a similar effect\u2026","rel":"","context":"In \"3d\"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2017\/01\/crawl.png?fit=1200%2C693&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":17442,"url":"https:\/\/css-tricks.com\/almanac\/properties\/t\/transform-origin\/","url_meta":{"origin":17444,"position":3},"title":"transform-origin","date":"July 9, 2012","format":false,"excerpt":"The transform-origin property is used in conjunction with CSS transforms, letting you change the point of origin of a transform. .element { transform: rotate(360deg); transform-origin: top left; } As indicated above, the transform-origin property can take up to two space-separated keyword or length values for a 2D transform and up\u2026","rel":"","context":"In \"transform\"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":14121,"url":"https:\/\/css-tricks.com\/almanac\/properties\/t\/top-right-bottom-left\/","url_meta":{"origin":17444,"position":4},"title":"top \/ bottom \/ left \/ right","date":"September 6, 2011","format":false,"excerpt":"The top, bottom, left, and right properties are used with position to set the placement of an element. They only have an effect on positioned elements, which are elements with the position property set to anything other than static. For example: relative, absolute, fixed, or sticky. div { : ||\u2026","rel":"","context":"In \"bottom\"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":17448,"url":"https:\/\/css-tricks.com\/almanac\/properties\/t\/transform-style\/","url_meta":{"origin":17444,"position":5},"title":"transform-style","date":"July 9, 2012","format":false,"excerpt":"The transform-style property, when applied to an element, determines if that element's children are positioned in 3D space, or flattened. .parent { transform-style: preserve-3d; } It accepts one of two values: flat (the default) and preserve-3d. To demonstrate the difference between the two values, click the toggle button in the\u2026","rel":"","context":"With 9 comments","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]}],"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/17444"}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=17444"}],"version-history":[{"count":9,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/17444\/revisions"}],"predecessor-version":[{"id":346078,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/17444\/revisions\/346078"}],"up":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/13941"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=17444"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=17444"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}