{"id":320275,"date":"2020-09-09T07:29:09","date_gmt":"2020-09-09T14:29:09","guid":{"rendered":"https:\/\/css-tricks.com\/?p=320275"},"modified":"2020-09-10T13:58:43","modified_gmt":"2020-09-10T20:58:43","slug":"how-css-perspective-works","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/how-css-perspective-works\/","title":{"rendered":"How CSS Perspective Works"},"content":{"rendered":"\n<p>As someone who loves creating CSS animations, one of the more powerful tools I use is <code>perspective<\/code>. While the <code>perspective<\/code> property is not capable of 3D effects all by itself (since basic shapes can\u2019t have depth), you <em>can<\/em> use the <code>transform<\/code> property to move and rotate objects in a 3D space (with the X, Y, and Z axes), then use <code>perspective<\/code> to control depth.<\/p>\n\n\n\n<p>In this article, I\u2019ll try to explain the concept of <code>perspective<\/code>, starting with the very basics, as we work up to a fully animated 3D cube.<\/p>\n\n\n\n<!--more-->\n\n\n<h3 class=\"wp-block-heading\" id=\"the-basics-of-perspective\">The basics of perspective<\/h3>\n\n\n<p>We\u2019ll start with a simple green square and and we\u2019ll move it on all three axes.<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_fd773fc2f3c2c1efc0b13829c813ce63\" src=\"\/\/codepen.io\/anon\/embed\/fd773fc2f3c2c1efc0b13829c813ce63?height=450&amp;theme-id=1&amp;slug-hash=fd773fc2f3c2c1efc0b13829c813ce63&amp;default-tab=result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed fd773fc2f3c2c1efc0b13829c813ce63\" title=\"CodePen Embed fd773fc2f3c2c1efc0b13829c813ce63\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>While moving the object on the X and Y axes is pretty straightforward, if we\u2019ll move it on the Z axis, it will look like the square stays exactly the same, and that\u2019s because when the object is moving on the Z axis, the animation moves it closer to us and then further from us, but the size (and location) of the square remains the same. That\u2019s where the CSS <a href=\"https:\/\/css-tricks.com\/almanac\/properties\/p\/perspective\/\"><code>perspective<\/code><\/a> property comes into play.<\/p>\n\n\n\n<p>While <code>perspective<\/code> has no influence on the object when it\u2019s moving on the X or Y axes, when the object is moving on the Z axis, <code>perspective<\/code> makes the square look bigger when it moves closer to us, and smaller when it moves further away. Yes, just like in \u201creal\u201d life.<\/p>\n\n\n\n<p>The same effect occurs when we\u2019re rotating the object:<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_2a968ececee7eb337ab45aa0b0792edd\" src=\"\/\/codepen.io\/anon\/embed\/2a968ececee7eb337ab45aa0b0792edd?height=450&amp;theme-id=1&amp;slug-hash=2a968ececee7eb337ab45aa0b0792edd&amp;default-tab=result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed 2a968ececee7eb337ab45aa0b0792edd\" title=\"CodePen Embed 2a968ececee7eb337ab45aa0b0792edd\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>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. But when we add <code>perspective<\/code>, 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.<\/p>\n\n\n\n<p>Note that when the rotation of the object on the X or Y axes is at 90\u00b0 (or 270\u00b0, 450\u00b0, 630\u00b0, and so on) it will \u201cdisappear\u201d from view. Again, this is happening because we can\u2019t add depth to an object, and at this position the square\u2019s width (or height) will actually be 0.<\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"the-perspective-value\">The perspective value<\/h3>\n\n\n<p>We need to set the <code>perspective<\/code> property with a value. This value sets the distance from the object\u2019s plane, or in other words, the perspective\u2019s strength. The bigger the value, the further you are from the object; the smaller the value, the more noticeable the perspective will be.<\/p>\n\n\n<h4 class=\"wp-block-heading\" id=\"the-perspective-origin\">The perspective origin<\/h4>\n\n\n<p>The <a href=\"https:\/\/css-tricks.com\/almanac\/properties\/p\/perspective-origin\/\"><code>perspective-origin<\/code><\/a> property determines the position from which you are \u201clooking\u201d at an object. 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).<\/p>\n\n\n\n<p>Alternatively, you can leave the object centered and move the <code>perspective-origin<\/code>. When the origin is set to the side, it\u2019s like you are \u201clooking\u201d at the object from that side. The bigger the value, the further aside it will look.<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_db5f120940371ef81f3f337dcbca61b4\" src=\"\/\/codepen.io\/anon\/embed\/db5f120940371ef81f3f337dcbca61b4?height=450&amp;theme-id=1&amp;slug-hash=db5f120940371ef81f3f337dcbca61b4&amp;default-tab=result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed db5f120940371ef81f3f337dcbca61b4\" title=\"CodePen Embed db5f120940371ef81f3f337dcbca61b4\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n<h4 class=\"wp-block-heading\" id=\"the-transformation\">The transformation<\/h4>\n\n\n<p>While <code>perspective<\/code> and <code>perspective-origin<\/code> are both set on an element\u2019s parent container and determine the position of the vanishing point (i.e. the distance from the object\u2019s plane from the position from which you are \u201clooking\u201d at the object), the object\u2019s position and rotation is set using the <code>transform<\/code> property, which is declared on the object itself.<\/p>\n\n\n\n<p>If you take a look at the code of the previous example, where I moved the square from one side to the other, you\u2019ll see that I used the <code>translateX()<\/code>&nbsp;function \u2014 which makes sense since I wanted it to move along the X axis. But notice that it\u2019s assigned to the transform property. The function is a type of transformation that is applied directly to the element we want to transform, but that behaves according to the perspective rules assigned to the parent element.<\/p>\n\n\n\n<p>We can \u201cchain\u201d multiple functions to the <code>transform<\/code> property. But when using multiple transforms, there three very important things to consider:<\/p>\n\n\n\n<ol><li>When rotating an object, its coordinate system is transformed along with the object.<\/li><li>When translating an object, it moves relative to its own coordinate system (rather than its parent\u2019s coordinates).<\/li><li>The order in which these values are written can (and will) change the end result.<\/li><\/ol>\n\n\n\n<p>In order to get the effect I was looking for in the previous demo, I first needed to translate the square on the X axis. Only then I could rotate it. If this had been done the other way around (rotate first, then translate), then the result would have been completely different.<\/p>\n\n\n\n<p>To underscore how important the order of values is to the <code>transform<\/code> property, let&#8217;s take a look at a couple of quick examples. First, a simple two-dimensional (2D) transformation of two squares that both have the same transform values, but declared in a different order:<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_36700c92aaafb432ebe2efb69d26d7a8\" src=\"\/\/codepen.io\/anon\/embed\/36700c92aaafb432ebe2efb69d26d7a8?height=450&amp;theme-id=1&amp;slug-hash=36700c92aaafb432ebe2efb69d26d7a8&amp;default-tab=result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed 36700c92aaafb432ebe2efb69d26d7a8\" title=\"CodePen Embed 36700c92aaafb432ebe2efb69d26d7a8\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>It\u2019s the same deal even if we\u2019re rotating the squares on the Y axis:<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_30915da2edd9aec0da926a21f4e35dfb\" src=\"\/\/codepen.io\/anon\/embed\/30915da2edd9aec0da926a21f4e35dfb?height=500&amp;theme-id=1&amp;slug-hash=30915da2edd9aec0da926a21f4e35dfb&amp;default-tab=result\" height=\"500\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed 30915da2edd9aec0da926a21f4e35dfb\" title=\"CodePen Embed 30915da2edd9aec0da926a21f4e35dfb\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>It should be noted that while the order of values is important, we could simply <em>change the values themselves<\/em> to get the desired result instead of changing the order of the values. For example\u2026<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">transform: translateX(100px) rotateY(90deg);<\/code><\/pre>\n\n\n\n<p>\u2026will have the same effect as:<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">transform: rotateY(90deg) translate&lt;strong>Z(100px);<\/code><\/pre>\n\n\n\n<p>That\u2019s because in the first line we moved the object on the <strong>X axis<\/strong> before rotating it, but in the second line we rotated the object, changed its coordinates, then moved it on the <strong>Z axis.<\/strong> Same result, different values.<\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"lets-look-at-something-more-interesting\">Let\u2019s look at something more interesting<\/h3>\n\n\n<p>Sure, squares are a good way to explain the general concept of perspective, but we really start to see how perspective works when we break into three-dimensional (3D) shapes.<\/p>\n\n\n\n<p>Let\u2019s use everything we\u2019ve covered so far to build a 3D cube.<\/p>\n\n\n<h4 class=\"wp-block-heading\" id=\"the-html\">The HTML<\/h4>\n\n\n<p>We\u2019ll create a .container element that wraps around a .cube element that, in turn, consists of six elements that represent the sides of the cube.<\/p>\n\n\n\n<pre rel=\"HTML\" class=\"wp-block-csstricks-code-block language-markup\" data-line=\"\"><code markup=\"tt\">&lt;div class=\"container\">\n\u00a0 &lt;div class=\"cube\">\n\u00a0 \u00a0 &lt;div class=\"side front\">&lt;\/div>\n\u00a0 \u00a0 &lt;div class=\"side back\">&lt;\/div>\n\u00a0 \u00a0 &lt;div class=\"side left\">&lt;\/div>\n\u00a0 \u00a0 &lt;div class=\"side right\">&lt;\/div>\n\u00a0 \u00a0 &lt;div class=\"side top\">&lt;\/div>\n\u00a0 \u00a0 &lt;div class=\"side bottom\">&lt;\/div>\n\u00a0 &lt;\/div>\n&lt;\/div><\/code><\/pre>\n\n\n<h4 class=\"wp-block-heading\" id=\"the-general-css\">The general CSS<\/h4>\n\n\n<p>First, we\u2019ll add some perspective to the parent <code>.container<\/code> element. Then we\u2019ll sure the <code>.cube<\/code> element has 200px sides and respects 3D transformations. I\u2019m adding a few presentational styles here, but the key properties are highlighted.<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"10,11,19,24\"><code markup=\"tt\">\/* The parent container, with perspective *\/\n.container {\n  width: 400px;\n  height: 400px;\n  border: 2px solid white;\n  border-radius: 4px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  perspective: 800px;\n  perspective-origin: top right;\n}\n\n\/* The child element, with 3D tranforms preserved *\/\n.cube {\n  position: relative;\n  width: 200px;\n  height: 200px;\n  transform-style: preserve-3d;\n}\n\n\/* The sides of the cube, absolutely positioned *\/\n.side {\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  opacity: 0.9;\n  border: 2px solid white;\n}\n\n\/* Background colors for the cube's sides to help visualize the work *\/\n.front { background-color: #d50000; }\n.back { background-color: #aa00ff; }\n\n.left { background-color: #304ffe; }\n.right { background-color: #0091ea; }\n\n.top { background-color: #00bfa5; }\n.bottom { background-color: #64dd17; }<\/code><\/pre>\n\n\n<h4 class=\"wp-block-heading\" id=\"transforming-the-sides\">Transforming the sides<\/h4>\n\n\n<p>The front side is the easiest. We\u2019ll move it forward by 100px:<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">.front {\n\u00a0 background-color: #d50000;\n\u00a0 transform: translateZ(100px);\n}<\/code><\/pre>\n\n\n\n<p>We can move the back side of the cube backwards by adding <code>translateZ(-100px)<\/code>. Another way to do it is by rotating the side 180deg then move it forward:<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">.back {\n\u00a0 background-color: #aa00ff;\n\u00a0 transform: translateZ(-100px);\n\u2028\n\u00a0 \/* or *\/\n\u00a0 \/* transform: rotateY(180deg) translateZ(100px); *\/\n}<\/code><\/pre>\n\n\n\n<p>Like the back, there are a couple of ways we can transform the left and right sides:<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">.left {\n\u00a0 background-color: #304ffe;\n\u00a0 transform: rotateY(90deg) translateZ(100px);\n\u2028\n\u00a0 \/* or *\/\n\u00a0 \/* transform: translateX(100px) rotateY(90deg); *\/\n}\n\n.right {\n\u00a0 background-color: #0091ea;\n\u00a0 transform: rotateY(-90deg) translateZ(100px);\n\u2028\n\u00a0 \/* or *\/\n\u00a0 \/* transform: translateX(-100px) rotateY(90deg); *\/\n}<\/code><\/pre>\n\n\n\n<p>The top and bottom are a little different. Instead of rotating them on the Y axis, we need to rotate them on the X axis. Again, it can be done in a &nbsp;couple of different ways:<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">.top {\n\u00a0 background-color: #00Bfa5;\n\u00a0 transform: rotateX(90deg) translateZ(100px);\n\u2028\n\u00a0 \/* or *\/\n\u00a0 \/* transform: translateY(-100px) rotateX(90deg); *\/\n}\n\u00a0\n.bottom {\n\u00a0 background-color: #64dd17;\n\u00a0 transform: rotateX(-90deg) translateZ(100px);\n\u2028\n\u00a0 \/* or *\/\n\u00a0 \/* transform: translateY(100px) rotateX(90deg); *\/\n}<\/code><\/pre>\n\n\n\n<p>This gives us a 3D cube!<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_44b2c7661a9db555a5714322dd129657\" src=\"\/\/codepen.io\/anon\/embed\/44b2c7661a9db555a5714322dd129657?height=450&amp;theme-id=1&amp;slug-hash=44b2c7661a9db555a5714322dd129657&amp;default-tab=result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed 44b2c7661a9db555a5714322dd129657\" title=\"CodePen Embed 44b2c7661a9db555a5714322dd129657\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>Feel free to play around with the different options for <code>perspective<\/code> and <code>perspective-origin<\/code> to see how they affect the cube.<\/p>\n\n\n<h4 class=\"wp-block-heading\" id=\"lets-talk-about-transformstyle\">Let\u2019s talk about <code>transform-style<\/code><\/h4>\n\n\n<p>We\u2019re going to add some fancy animation to our cube, but let\u2019s first talk about the <a href=\"https:\/\/css-tricks.com\/almanac\/properties\/t\/transform-style\/\"><code>transform-style<\/code><\/a> property. I added it earlier in the general CSS, but didn\u2019t really explain what it is or what it does.<\/p>\n\n\n\n<p>The transform-style property has two values:&nbsp;<\/p>\n\n\n\n<ul><li><code>flat<\/code> (default)<\/li><li><code>preserve-3d<\/code><\/li><\/ul>\n\n\n\n<p>When we set the property to <code>preserve-3d<\/code>, it does two important things:<\/p>\n\n\n\n<ol><li>It tells the sides of the cube (the child elements) to be positioned in the same 3D space as the cube. If it is not set to <code>preserve-3d<\/code>, the default value is set to <code>flat<\/code> , and the sides are flattened in the cube\u2019s plane. <code>preserve-3d<\/code> \u201ccopies\u201d the cube perspective to its children (the sides) and allows us to rotate just the cube, so we don\u2019t need to animate each side separately.<\/li><li>It displays the child elements according to their <em>position<\/em> in the 3D space, regardless of their <em>place<\/em> in the DOM.<\/li><\/ol>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_d0bc7f2e16c17243cde7c5397dc33f30\" src=\"\/\/codepen.io\/anon\/embed\/d0bc7f2e16c17243cde7c5397dc33f30?height=450&amp;theme-id=1&amp;slug-hash=d0bc7f2e16c17243cde7c5397dc33f30&amp;default-tab=result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed d0bc7f2e16c17243cde7c5397dc33f30\" title=\"CodePen Embed d0bc7f2e16c17243cde7c5397dc33f30\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>There are three squares in this example \u2014 green, red, and blue. The green square has a <code>translateZ<\/code> value of 100px, meaning it\u2019s in front of the other squares. The blue square has a <code>translateZ<\/code> of -100px, meaning is behind the other squares.&nbsp;<\/p>\n\n\n\n<p>But in the DOM, the order of the squares is: green, red, blue. Therefore, when <code>transform-style<\/code> is set to flat (or not set at all), the blue square will appear on top, and the green square will be in the back, because that is the order of the DOM. But if we set the <code>transform-style<\/code> to <code>preserve-3d<\/code>, it will render according to its position in the 3D space. As a result, the green square will be in front, and the blue square will be in the back.<\/p>\n\n\n<h4 class=\"wp-block-heading\" id=\"animation\">Animation<\/h4>\n\n\n<p>Now, let\u2019s animate the cube! And to make things more interesting, we\u2019ll add the animation to all three axes. First, we\u2019ll add the <code>animation<\/code> property to the <code>.cube<\/code>. It won\u2019t do anything yet since we haven\u2019t defined the animation keyframes, but it\u2019s in place for when we do.<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">animation: cubeRotate 10s linear infinite;<\/code><\/pre>\n\n\n\n<p>Now the keyframes. We\u2019re basically going to rotate the cube along each axis so that it appears to be rolling in space.<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">@keyframes cubeRotate {\n\u00a0 from { transform: rotateY(0deg) rotateX(720deg) rotateZ(0deg); }\n\u00a0 to { transform: rotateY(360deg) rotateX(0deg) rotateZ(360deg); }\n}<\/code><\/pre>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_f92d8cab824fa46174961909ab87771c\" src=\"\/\/codepen.io\/anon\/embed\/f92d8cab824fa46174961909ab87771c?height=500&amp;theme-id=1&amp;slug-hash=f92d8cab824fa46174961909ab87771c&amp;default-tab=result\" height=\"500\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed f92d8cab824fa46174961909ab87771c\" title=\"CodePen Embed f92d8cab824fa46174961909ab87771c\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>The <code>perspective<\/code> property is really what gives the animation that depth, like we\u2019re seeing the cube roll left and right, as well as forward and backward.<\/p>\n\n\n\n<p>But before now, the value of the perspective property had been constant, and so was the <code>perspective-origin<\/code>. Let&#8217;s see how changing these values affects the appearance of the cube.<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_8987ff9244e30856aff23b1d2ea4fb8f\" src=\"\/\/codepen.io\/anon\/embed\/8987ff9244e30856aff23b1d2ea4fb8f?height=650&amp;theme-id=1&amp;slug-hash=8987ff9244e30856aff23b1d2ea4fb8f&amp;default-tab=result\" height=\"650\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed 8987ff9244e30856aff23b1d2ea4fb8f\" title=\"CodePen Embed 8987ff9244e30856aff23b1d2ea4fb8f\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>I&#8217;ve added three sliders to this example to help see how different values affect the cube\u2019s perspective:<\/p>\n\n\n\n<ul><li><strong>The left slider sets the value of the <code>perspective<\/code> property.<\/strong> Remember, this value sets the distance from the object&#8217;s plane, so the smaller the value is, the more noticeable the perspective effect will be.<\/li><li><strong>The other two sliders refer to the <code>perspective-origin<\/code> property.<\/strong> The right slider sets the origin on the vertical axis, from top to bottom, and the bottom slider sets the origin on the horizontal axis, from right to left.<\/li><\/ul>\n\n\n\n<p>Note that while the animation is running, these changes may be less noticeable as the cube itself rotates, but you can easily turn off the animation by clicking the &#8220;Run animation&#8221; button.<\/p>\n\n\n\n<p>Play around with these values and find out how they affect the appearance of the cube. There is no one &#8220;right&#8221; value, and these values vary from project to project, since they&#8217;re dependent on the animation, the size of the object, and the effect you want to achieve.<\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"so-whats-next\">So what\u2019s next?<\/h3>\n\n\n<p>Now that you\u2019ve mastered the basics of the <code>perspective<\/code> property in CSS, you can use your imagination and creativity to create 3D objects in your own projects, adding depth and interest to your buttons, menus, inputs, and anything else you want to \u201cbring to life.\u201d<\/p>\n\n\n\n<p>In the meanwhile, you can practice and enhance your skills by trying to create some <a href=\"https:\/\/codepen.io\/amitsheen\/pen\/bb97668b177477d5db88a46a0888e6e7\" rel=\"noopener\">complex structures<\/a> and perspective-based animations like <a href=\"https:\/\/codepen.io\/amitsheen\/pen\/WNrjEyj\" rel=\"noopener\">this<\/a>, <a href=\"https:\/\/codepen.io\/amitsheen\/pen\/Vwexdgr\" rel=\"noopener\">this<\/a>, <a href=\"https:\/\/codepen.io\/amitsheen\/pen\/xaPamB\" rel=\"noopener\">this<\/a>, or even <a href=\"https:\/\/codepen.io\/amitsheen\/pen\/WNweryv\" rel=\"noopener\">this<\/a>.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"https:\/\/amitsh.com\/2020\/imglogger?img=perspective.jpg\" alt=\"\"\/><\/figure>\n\n\n\n<p>I hope you enjoyed reading this article and learned something new in the process! Feel free to leave a comment to let me know what you think or <a href=\"https:\/\/twitter.com\/amit_sheen\" rel=\"noopener\">drop me a line on Twitter<\/a> if you have any questions about perspective or any other topic in this article.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>As someone who loves creating CSS animations, one of the more powerful tools I use is perspective. While the perspective property is not capable of 3D effects all by itself (since basic shapes can\u2019t have depth), you can use the transform property to move and rotate objects in a 3D space (with the X, Y, [&hellip;]<\/p>\n","protected":false},"author":277647,"featured_media":320296,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","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":"","jetpack_publicize_message":"","jetpack_is_tweetstorm":false,"jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":[]},"categories":[4],"tags":[1321,1293,1147],"jetpack_publicize_connections":[],"acf":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/08\/perspective-cubes.png?fit=1200%2C600&ssl=1","jetpack-related-posts":[{"id":145808,"url":"https:\/\/css-tricks.com\/creating-a-3d-cube-image-gallery\/","url_meta":{"origin":320275,"position":0},"title":"Creating a 3D Cube Image Gallery","date":"August 6, 2013","format":false,"excerpt":"The following is a guest post by Kushagra Gour (@chinchang457). Kushagra wrote to me to show me a fun interactive demo he made. It touches on many of the concepts of 3D transforms in CSS, a topic we haven't covered a ton here. So here's Kushagra taking the reins to\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":333063,"url":"https:\/\/css-tricks.com\/re-creating-the-porky-pig-animation-from-looney-tunes-in-css\/","url_meta":{"origin":320275,"position":1},"title":"Re-Creating the Porky Pig Animation from Looney Tunes in CSS","date":"January 26, 2021","format":false,"excerpt":"You know, Porky Pig coming out of those red rings announcing the end of a Looney Tunes cartoon. We\u2019ll get there, but first we need to cover some CSS concepts. Everything in CSS is a box, or rectangle. Rectangles stack, and can be displayed on top of, or below, other\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/01\/3QtAnNyg.jpeg?fit=1200%2C947&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":21784,"url":"https:\/\/css-tricks.com\/3d-button-parallax\/","url_meta":{"origin":320275,"position":2},"title":"3D Button Parallax","date":"May 27, 2013","format":false,"excerpt":"The following is a guest post by Alexander Futekov. We recently published an article by Joshua Bader in which a 3D inset look was adjusted as the page scrolled to give it a more realistic interaction. This is similar only Alexander is using an extruded look on buttons and employing\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":323488,"url":"https:\/\/css-tricks.com\/css-in-3d-learning-to-think-in-cubes-instead-of-boxes\/","url_meta":{"origin":320275,"position":3},"title":"CSS in 3D: Learning to Think in Cubes Instead of Boxes","date":"October 23, 2020","format":false,"excerpt":"My path to learning CSS was a little unorthodox. I didn't start as a front-end developer. I was a Java developer. In fact, my earliest recollections of CSS were picking colors for things in Visual Studio. It wasn't until later that I got to tackle and find my love for\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/10\/jhey-workspace.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":193982,"url":"https:\/\/css-tricks.com\/tour-performant-responsive-css-site\/","url_meta":{"origin":320275,"position":4},"title":"Tour of a Performant and Responsive CSS Only Site","date":"January 23, 2015","format":false,"excerpt":"The following is a guest post by Rajoshi Ghosh and Tanmai Gopal of 34 Cross. They emailed me to show me their new website and how performant it was despite having cool features, being visually rich, and responsive. I was like, hey, you should write about it! This is that.\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":375621,"url":"https:\/\/css-tricks.com\/css-infinite-3d-sliders\/","url_meta":{"origin":320275,"position":5},"title":"CSS Infinite 3D Sliders","date":"December 16, 2022","format":false,"excerpt":"In this series, we\u2019ve been making image sliders with nothing but HTML and CSS. The idea is that we can use the same markup but different CSS to get wildly different results, no matter how many images we toss in. We started with a circular slider that rotates infinitely, sort\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/11\/cube-slider.jpg?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]}],"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/320275"}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/277647"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=320275"}],"version-history":[{"count":10,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/320275\/revisions"}],"predecessor-version":[{"id":320937,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/320275\/revisions\/320937"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media\/320296"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=320275"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/categories?post=320275"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=320275"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}