{"id":17446,"date":"2012-07-09T12:17:23","date_gmt":"2012-07-09T19:17:23","guid":{"rendered":"http:\/\/css-tricks.com\/?page_id=17446"},"modified":"2021-08-04T08:29:51","modified_gmt":"2021-08-04T15:29:51","slug":"perspective-origin","status":"publish","type":"page","link":"https:\/\/css-tricks.com\/almanac\/properties\/p\/perspective-origin\/","title":{"rendered":"perspective-origin"},"content":{"rendered":"\n<p>The <code>perspective-origin<\/code> property determines the origin for the <code><a href=\"https:\/\/css-tricks.com\/almanac\/properties\/p\/perspective\/\">perspective<\/a><\/code> property. Think of it as the vanishing point of the current 3D-space.<\/p>\n\n\n\n<p>Note as for the <code>perspective<\/code> property, <code>perspective-origin<\/code> has to be defined on the parent element in order to give the transformed children depth.<\/p>\n\n\n\n<p>The <code>perspective-origin<\/code> property doesn&#8217;t do anything by itself. It has to be defined on an element along with <code>perspective<\/code>.<\/p>\n\n\n\n<!--more-->\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">\/**\n * Syntax \n * perspective-origin: x-position\n * perspective-origin: x-position y-position\n * \n * perspective-origin: &lt;percentage&gt; | &lt;length&gt; | constants | inherit\n *\/\n\n.element1 { perspective-origin: 25% 75%; }\n\n.element2 { perspective-origin: 10px 25px; }\n\n.element3 { perspective-origin: left bottom; }<\/code><\/pre>\n\n\n\n<p>Below is a demo showing how a 3D cube behaves when altering its vanishing point by changing the <code>perspective-origin<\/code> value (constants).<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_jpnsH\" src=\"\/\/codepen.io\/anon\/embed\/jpnsH?height=550&amp;theme-id=1&amp;slug-hash=jpnsH&amp;default-tab=result\" height=\"550\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed jpnsH\" title=\"CodePen Embed jpnsH\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>Hey, let&#8217;s animate the <code>perspective-origin<\/code>, just for fun!<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_dhBlC\" src=\"\/\/codepen.io\/anon\/embed\/dhBlC?height=450&amp;theme-id=1&amp;slug-hash=dhBlC&amp;default-tab=result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed dhBlC\" title=\"CodePen Embed dhBlC\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<ol><li>It starts at <code>0% 0%<\/code> (top left)<\/li><li>Then go to <code>100% 0%<\/code> (top right)<\/li><li>Then to <code>100% 100%<\/code> (bottom right)<\/li><li>Then to <code>0% 100%<\/code> (bottom left)<\/li><li>Then go back to 1. and restart<\/li><\/ol>\n\n\n<h3 class=\"wp-block-heading\" id=\"browser-support\">Browser support<\/h3>\n\n<div class=\"caniuse\"><div class=\"caniuse-header\"><p>This browser support data is from <a href=\"http:\/\/caniuse.com\/#feat=transforms3d\" rel=\"noopener\">Caniuse<\/a>, which has more detail. A number indicates that browser supports the feature at that version and up.<\/p><\/div><div class=\"caniuse-section\"><h4>Desktop<\/h4><table class=\"browser-support-table\"><thead><tr><th class=\"chrome\"><span>Chrome<\/span><\/th><th class=\"firefox\"><span>Firefox<\/span><\/th><th class=\"ie\"><span>IE<\/span><\/th><th class=\"edge\"><span>Edge<\/span><\/th><th class=\"safari\"><span>Safari<\/span><\/th><\/tr><\/thead><tbody><tr><td class=\"y yep\" title=\"Chrome - \"><span class=\"caniuse-agents-version version\">12*<\/span><\/td><td class=\"y yep\" title=\"Firefox - \"><span class=\"caniuse-agents-version version\">10*<\/span><\/td><td class=\"a yep-nope yep-nope-partial\" title=\"IE - \"><span class=\"caniuse-agents-version version\">11<\/span><\/td><td class=\"y yep\" title=\"Edge - \"><span class=\"caniuse-agents-version version\">12<\/span><\/td><td class=\"y yep\" title=\"Safari - \"><span class=\"caniuse-agents-version version\">4*<\/span><\/td><\/tr><\/table><\/div><div class=\"caniuse-section\"><h4>Mobile \/ Tablet<\/h4><table class=\"browser-support-table\"><thead><tr><th class=\"and_chr\"><span>Android Chrome<\/span><\/th><th class=\"and_ff\"><span>Android Firefox<\/span><\/th><th class=\"android\"><span>Android<\/span><\/th><th class=\"ios_saf\"><span>iOS Safari<\/span><\/th><\/tr><\/thead><tbody><tr><td class=\"y yep\" title=\"Android Chrome - \"><span class=\"caniuse-agents-version version\">124<\/span><\/td><td class=\"y yep\" title=\"Android Firefox - \"><span class=\"caniuse-agents-version version\">125<\/span><\/td><td class=\"y yep\" title=\"Android - \"><span class=\"caniuse-agents-version version\">3*<\/span><\/td><td class=\"y yep\" title=\"iOS Safari - \"><span class=\"caniuse-agents-version version\">3.2*<\/span><\/td><\/tr><\/table><\/div><\/div>\n\n\n<h3 class=\"wp-block-heading\" id=\"other-resources\">Other resources<\/h3>\n\n\n<ul><li><a href=\"http:\/\/dev.w3.org\/csswg\/css3-3d-transforms\/#perspective-origin-property\" rel=\"noopener\"><code>perspective-origin<\/code> in the CSS specifications<\/a><\/li><li><a href=\"https:\/\/developer.mozilla.org\/fr\/docs\/CSS\/perspective-origin\" rel=\"noopener\"><code>perspective-origin<\/code> on MDN<\/a><\/li><li><a href=\"http:\/\/desandro.github.com\/3dtransforms\/docs\/perspective.html\" rel=\"noopener\"><code>perspective<\/code> by David DeSandro<\/a><\/li><\/ul>\n","protected":false},"excerpt":{"rendered":"<p>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&#8217;t do anything by itself. It has to [&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":[833,1293],"acf":[],"jetpack-related-posts":[{"id":17442,"url":"https:\/\/css-tricks.com\/almanac\/properties\/t\/transform-origin\/","url_meta":{"origin":17446,"position":0},"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":250613,"url":"https:\/\/css-tricks.com\/snippets\/css\/star-wars-crawl-text\/","url_meta":{"origin":17446,"position":1},"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":17444,"url":"https:\/\/css-tricks.com\/almanac\/properties\/p\/perspective\/","url_meta":{"origin":17446,"position":2},"title":"perspective","date":"July 9, 2012","format":false,"excerpt":"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\u2026","rel":"","context":"With 21 comments","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":324740,"url":"https:\/\/css-tricks.com\/almanac\/properties\/m\/mask-origin\/","url_meta":{"origin":17446,"position":3},"title":"mask-origin","date":"October 29, 2020","format":false,"excerpt":"The mask-origin specifies the mask position area of a mask layer image. In other words, it defines where the origin of the mask layer image is, whether it's the edge of the border, padding or content box. .element { \u00a0 mask-image: url(star.svg); \u00a0 mask-origin: content-box; } For elements rendered as\u2026","rel":"","context":"Similar post","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":343405,"url":"https:\/\/css-tricks.com\/almanac\/properties\/m\/mask\/","url_meta":{"origin":17446,"position":4},"title":"mask","date":"July 2, 2021","format":false,"excerpt":"The mask property is a shorthand to specify all mask-* properties. mask can hide part of the element is applied to and It accepts one or more comma-separated values, where each value corresponds to a mask layer. .element { mask: url(mask.png) right bottom \/ 100px repeat-y; } mask is included\u2026","rel":"","context":"Similar post","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/11\/drama-masks.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":15601,"url":"https:\/\/css-tricks.com\/snippets\/css\/useful-css3-less-mixins\/","url_meta":{"origin":17446,"position":5},"title":"Useful CSS3 Less Mixins","date":"December 16, 2011","format":false,"excerpt":".text-shadow (@string: 0 1px 3px rgba(0, 0, 0, 0.25)) { text-shadow: @string; } .box-shadow (@string) { -webkit-box-shadow: @string; -moz-box-shadow: @string; box-shadow: @string; } .drop-shadow (@x: 0, @y: 1px, @blur: 2px, @spread: 0, @alpha: 0.25) { -webkit-box-shadow: @x @y @blur @spread rgba(0, 0, 0, @alpha); -moz-box-shadow: @x @y @blur @spread rgba(0,\u2026","rel":"","context":"With 51 comments","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]}],"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/17446"}],"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=17446"}],"version-history":[{"count":10,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/17446\/revisions"}],"predecessor-version":[{"id":346075,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/17446\/revisions\/346075"}],"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=17446"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=17446"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}