{"id":14123,"date":"2011-09-06T18:57:17","date_gmt":"2011-09-07T01:57:17","guid":{"rendered":"http:\/\/css-tricks.com\/?page_id=14123"},"modified":"2023-01-27T10:51:41","modified_gmt":"2023-01-27T18:51:41","slug":"transform","status":"publish","type":"page","link":"https:\/\/css-tricks.com\/almanac\/properties\/t\/transform\/","title":{"rendered":"transform"},"content":{"rendered":"\n<p>The <code>transform<\/code> property allows you to visually manipulate an element by skewing, rotating, translating, or scaling:<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"4\"><code markup=\"tt\">.element {\n  width: 20px;\n  height: 20px;\n  transform: scale(20);\n}<\/code><\/pre>\n\n\n\n<!--more-->\n\n\n\n<p>Even with a declared height and width, this element will now be scaled to twenty times its original size:<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_d5d50055d95ceecbf94068e75a502c97\" src=\"\/\/codepen.io\/anon\/embed\/d5d50055d95ceecbf94068e75a502c97?height=450&amp;theme-id=1&amp;slug-hash=d5d50055d95ceecbf94068e75a502c97&amp;default-tab=result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed d5d50055d95ceecbf94068e75a502c97\" title=\"CodePen Embed d5d50055d95ceecbf94068e75a502c97\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>Giving this function two values will stretch it horizontally by the first and vertically by the second. In the following example, the element will now be twice the width but half the height of the original element:<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">.element {\n  transform: scale(2, .5);\n}<\/code><\/pre>\n\n\n\n<p>Or you can be more specific without using the shorthand function:<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">transform: scaleX(2);\ntransform: scaleY(.5);<\/code><\/pre>\n\n\n\n<p>But <code>scale()<\/code> is just one of many transform functions that are available.<\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"values\">Values<\/h3>\n\n\n<ul>\n<li><strong><code>scale()<\/code>:<\/strong> Affects the size of the element. This also applies to the <code>font-size<\/code>, <code>padding<\/code>, <code>height<\/code>, and <code>width<\/code> of an element, too. It\u2019s also a a shorthand function for the <code>scaleX<\/code> and <code>scaleY<\/code> functions.<\/li>\n\n\n\n<li><strong><code>skewX()<\/code> and <code>skewY()<\/code>:<\/strong> Tilts an element to the left or right, like turning a rectangle into a parallelogram. <code>skew()<\/code> is a shorthand that combines <code>skewX()<\/code> and <code>skewY<\/code> by accepting both values.<\/li>\n\n\n\n<li><strong><code>translate()<\/code>:<\/strong> Moves an element sideways or up and down.<\/li>\n\n\n\n<li><code><strong>rotate()<\/strong><\/code>: Rotates the element clockwise from its current position.<\/li>\n\n\n\n<li><strong><code>matrix()<\/code>:<\/strong> A function that is probably not intended to be written by hand, but combines all transforms into one.<\/li>\n\n\n\n<li><strong><code>perspective()<\/code>:<\/strong> Doesn\u2019t affect the element itself, but affects the transforms of descendent elements&#8217; 3D transforms, allowing them all to have a consistent depth perspective.<\/li>\n<\/ul>\n\n\n<ul class=\"simpletoc-list\"   >\n<li>\n<a  href=\"#skew\">Skew<\/a><\/li><li>\n<a  href=\"#rotate\">Rotate<\/a><\/li><li>\n<a  href=\"#translate\">Translate<\/a><\/li><li>\n<a  href=\"#multiple-values\">Multiple values<\/a><\/li><li>\n<a  href=\"#matrix\">Matrix<\/a><\/li><li>\n<a  href=\"#3d-transforms\">3D Transforms<\/a><\/li><\/ul>\n<\/li><\/li><\/ul>\n<\/li><\/ul>\n\n<h4 class=\"wp-block-heading\" id=\"skew\">Skew<\/h4>\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">\/* Skew points along the x-axis *\/\n.element {\n  transform: skewX(25deg);\n}\n\n\/* Skew point along the y-axis *\/\n.element {\n  transform: skewY(25deg);\n}\n\n\/* Skew points along the x- and y-axis *\/\n.element {\n  transform: skew(25deg, 25deg);\n}<\/code><\/pre>\n\n\n\n<p>The <code>skewX<\/code> and <code>skewY<\/code> transform functions tilt an element one way or the other. Remember: there is no shorthand property for skewing an element, so you\u2019ll need to use both functions. In the example below, we can skew a 100px x 100px square to the left and right with <code>skewX<\/code>:<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_cb9ab0a908241806e3eff88b57f15693\" src=\"\/\/codepen.io\/anon\/embed\/cb9ab0a908241806e3eff88b57f15693?height=450&amp;theme-id=1&amp;slug-hash=cb9ab0a908241806e3eff88b57f15693&amp;default-tab=result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed cb9ab0a908241806e3eff88b57f15693\" title=\"CodePen Embed cb9ab0a908241806e3eff88b57f15693\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>Whilst in this example we can skew an element vertically with with <code>skewY<\/code>:<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_d7be823bca05649502f63fc8490c6d93\" src=\"\/\/codepen.io\/anon\/embed\/d7be823bca05649502f63fc8490c6d93?height=450&amp;theme-id=1&amp;slug-hash=d7be823bca05649502f63fc8490c6d93&amp;default-tab=result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed d7be823bca05649502f63fc8490c6d93\" title=\"CodePen Embed d7be823bca05649502f63fc8490c6d93\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>Now let&#8217;s use <code>skew()<\/code> to combine the two:<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_povNBmQ\" src=\"\/\/codepen.io\/anon\/embed\/povNBmQ?height=450&amp;theme-id=1&amp;slug-hash=povNBmQ&amp;default-tab=result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed povNBmQ\" title=\"CodePen Embed povNBmQ\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n<h4 class=\"wp-block-heading\" id=\"rotate\">Rotate<\/h4>\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">.element {\n  transform: rotate(25deg);\n}<\/code><\/pre>\n\n\n\n<p>This rotates an element clockwise from its original position, whilst a negative value would rotate it in the opposite direction. Here\u2019s a simple animated example where a square continues to rotate 360 degrees every three seconds:<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_d31be2118a19782d2c4fcfb048351ccf\" src=\"\/\/codepen.io\/anon\/embed\/d31be2118a19782d2c4fcfb048351ccf?height=450&amp;theme-id=1&amp;slug-hash=d31be2118a19782d2c4fcfb048351ccf&amp;default-tab=result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed d31be2118a19782d2c4fcfb048351ccf\" title=\"CodePen Embed d31be2118a19782d2c4fcfb048351ccf\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>We can also use the <code>rotateX<\/code>, <code>rotateY<\/code>, and <code>rotateZ<\/code> functions, like so:<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_ebb6b5a5cec86aa04168f03e26c7501c\" src=\"\/\/codepen.io\/anon\/embed\/ebb6b5a5cec86aa04168f03e26c7501c?height=450&amp;theme-id=1&amp;slug-hash=ebb6b5a5cec86aa04168f03e26c7501c&amp;default-tab=result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed ebb6b5a5cec86aa04168f03e26c7501c\" title=\"CodePen Embed ebb6b5a5cec86aa04168f03e26c7501c\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n<h4 class=\"wp-block-heading\" id=\"translate\">Translate<\/h4>\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">.element {\n  transform: translate(20px, 10px);\n}<\/code><\/pre>\n\n\n\n<p>This transform function moves an element sideways, or up and down. Why not just use top\/left\/bottom\/right? Well, it&#8217;s a bit confusing at times. I would think of those as layout\/positioning (they have better browser support anyway) and this as a way to move those things around as part of a transition or animation.<\/p>\n\n\n\n<p>These values would be any length value, like 10px or 2.4em. One value will move the element to the right (negative values to the left). If a second value is provided, that second value will move it down (negative values up). Or, you can get specific:<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">transform: translateX(value);\ntransform: translateY(value);<\/code><\/pre>\n\n\n\n<p>It\u2019s important to note that an element using <code>transform<\/code> will not cause other elements to flow around it. By using the <code>translate<\/code> function below and nudging the green square out of its original position, we\u2019ll notice how the surrounding text will remain fixed in place, as if the square is a block element:<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_b9df78cff3ab6b64b5925b10c1e52d9e\" src=\"\/\/codepen.io\/anon\/embed\/b9df78cff3ab6b64b5925b10c1e52d9e?height=450&amp;theme-id=1&amp;slug-hash=b9df78cff3ab6b64b5925b10c1e52d9e&amp;default-tab=result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed b9df78cff3ab6b64b5925b10c1e52d9e\" title=\"CodePen Embed b9df78cff3ab6b64b5925b10c1e52d9e\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>It\u2019s also worth noting that <code>translate<\/code> will be hardware accelerated if you want to animate that property, unlike <code>position: absolute<\/code>.<\/p>\n\n\n<h4 class=\"wp-block-heading\" id=\"multiple-values\">Multiple values<\/h4>\n\n\n<p>With a space-separated list you can add multiple values to the <code>transform<\/code> property:<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">.element {\n  width: 20px;\n  height: 20px;\n  transform: scale(20) skew(-20deg);\n}<\/code><\/pre>\n\n\n\n<p>It\u2019s worth noting that there is an order in which these transforms will be carried out, in the example above `skew` will be performed first and then the element will be scaled.<\/p>\n\n\n<h4 class=\"wp-block-heading\" id=\"matrix\">Matrix<\/h4>\n\n\n<p>The <code>matrix<\/code> transform function can be used to combine all transforms into one. It&#8217;s a bit like transform shorthand, only I don&#8217;t believe it&#8217;s really intended to be written by hand. There are tools out there like <a href=\"http:\/\/meyerweb.com\/eric\/tools\/matrix\/\" rel=\"noopener\">The Matrix Resolutions<\/a>, which can convert a group of transforms into a single matrix declaration. Perhaps in some situations this can reduce file size, although author-unfriendly micro optimizations like that are likely not worth your time.<\/p>\n\n\n\n<p>For the curious, this:<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">rotate(45deg) translate(24px, 25px)<\/code><\/pre>\n\n\n\n<p>&#8230;can also be represented as:<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">matrix(0.7071067811865475, 0.7071067811865476, -0.7071067811865476, 0.7071067811865475, -0.7071067811865497, 34.648232278140824)<\/code><\/pre>\n\n\n<h4 class=\"wp-block-heading\" id=\"3d-transforms\">3D Transforms<\/h4>\n\n\n<p>Most of the above properties have 3D versions of them.<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">translate3d(x, y, z)\ntranslateZ(z)<\/code><\/pre>\n\n\n\n<p>The third value in <code>translate3d<\/code> or the value in <code>translateZ<\/code> moves the element toward the viewer, negative values away.<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">scale3d(sx, sy, sz)\nscaleZ(sz)<\/code><\/pre>\n\n\n\n<p>The third value in <code>scale3d<\/code> or the value in <code>scaleZ<\/code> affects the scaling along the z-axis (e.g. the imaginary line coming straight out of the screen).<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">rotateX(value)\nrotateY(value)\nrotate3d(x, y, z)<\/code><\/pre>\n\n\n\n<p><code>rotateX<\/code> and <code>rotateY<\/code> will rotate an element in 3D space around those axises. <code>rotate3d<\/code> allows you to specify a point in 3D space in which to rotate the element around.<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">matrix3d(\u2026)<\/code><\/pre>\n\n\n\n<p>A way to programmatically describe a 3D transform in a 4&#215;4 grid. Nobody will ever hand write one of these, ever.<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">perspective(value)<\/code><\/pre>\n\n\n\n<p>This value doesn&#8217;t affect the element itself, but it affects the transforms of descendent elements&#8217; 3D transforms, allowing them to all have a consistent depth perspective.<\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"more-information\">More Information<\/h3>\n\n\n<ul>\n<li><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/CSS_Transforms\" rel=\"noopener\">MDN Docs on transform<\/a> and <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/CSS_Transforms\/Using_CSS_transforms\" rel=\"noopener\">usage<\/a>.<\/li>\n\n\n\n<li>David DeSandro&#8217;s <a href=\"https:\/\/desandro.github.io\/3dtransforms\/\" rel=\"noopener\">documentation on 3D transforms<\/a><\/li>\n\n\n\n<li>Surfin&#8217; Safari: <a href=\"http:\/\/www.webkit.org\/blog\/386\/3d-transforms\/\" rel=\"noopener\">3D transforms<\/a><\/li>\n\n\n\n<li><a href=\"http:\/\/dev.w3.org\/csswg\/css3-transforms\/\" rel=\"noopener\">W3C spec on CSS3 transforms<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/24ways.org\/2010\/intro-to-css-3d-transforms\/\" rel=\"noopener\">Intro to CSS 3D transforms<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/www.digitalocean.com\/community\/tutorials\/css-translatez-and-perspective?utm_medium=content_acq&amp;utm_source=css-tricks&amp;utm_campaign=&amp;utm_content=awareness_bestsellers\" rel=\"noopener\">Tricks for Using CSS <code>translateZ()<\/code> and <code>perspective()<\/code><\/a> (DigitalOcean)<\/li>\n<\/ul>\n\n\n<h3 class=\"wp-block-heading\" id=\"related-properties\">Related properties<\/h3>\n\n\n    \t\t\n    <div class=\"in-article-cards\">\n      <article class=\"in-article-card \" id=\"mini-post-14123\">\n\n  <time datetime=\"2011-08-31\" title=\"Originally published Sep 6, 2011\">\n    <strong>\n                \n      Almanac\n      <\/strong>\n\n    on\n\n    Feb 1, 2023  <\/time>\n\n  <h3>\n    <a href=\"https:\/\/css-tricks.com\/almanac\/properties\/b\/backface-visibility\/\">\n      backface-visibility    <\/a>\n  <\/h3>\n\n      <a href=\"https:\/\/css-tricks.com\/almanac\/properties\/b\/backface-visibility\/\" class=\"almanac-example\">\n      <code class=\"language-css\">.element { backface-visibility: hidden; }<\/code>\n    <\/a>\n  \n  \n  <div class=\"author-row\">\n    <a href=\"https:\/\/css-tricks.com\/author\/saracope\/\" aria-label=\"Author page of Sara Cope\">\n      <img alt='' src='https:\/\/secure.gravatar.com\/avatar\/84da92f298e5b124d92fb581b82cfdf4?s=80&#038;d=retro&#038;r=pg' srcset='https:\/\/secure.gravatar.com\/avatar\/84da92f298e5b124d92fb581b82cfdf4?s=160&#038;d=retro&#038;r=pg 2x' class='avatar avatar-80 photo' height='80' width='80' \/>    <\/a>\n  \n    <a class=\"author-name\" href=\"https:\/\/css-tricks.com\/author\/saracope\/\">\n      Sara Cope    <\/a>\n  <\/div>\n\n<\/article>\n<article class=\"in-article-card \" id=\"mini-post-14123\">\n\n  <time datetime=\"2012-07-09\" title=\"Originally published Sep 6, 2011\">\n    <strong>\n                \n      Almanac\n      <\/strong>\n\n    on\n\n    Aug 4, 2021  <\/time>\n\n  <h3>\n    <a href=\"https:\/\/css-tricks.com\/almanac\/properties\/p\/perspective\/\">\n      perspective    <\/a>\n  <\/h3>\n\n      <a href=\"https:\/\/css-tricks.com\/almanac\/properties\/p\/perspective\/\" class=\"almanac-example\">\n      <code class=\"language-css\">.element { perspective: 1000px; }<\/code>\n    <\/a>\n  \n  \n  <div class=\"author-row\">\n    <a href=\"https:\/\/css-tricks.com\/author\/chriscoyier\/\" aria-label=\"Author page of Chris Coyier\">\n      <img alt='' src='https:\/\/secure.gravatar.com\/avatar\/8081b26e05bb4354f7d65ffc34cbbd67?s=80&#038;d=retro&#038;r=pg' srcset='https:\/\/secure.gravatar.com\/avatar\/8081b26e05bb4354f7d65ffc34cbbd67?s=160&#038;d=retro&#038;r=pg 2x' class='avatar avatar-80 photo' height='80' width='80' \/>    <\/a>\n  \n    <a class=\"author-name\" href=\"https:\/\/css-tricks.com\/author\/chriscoyier\/\">\n      Chris Coyier    <\/a>\n  <\/div>\n\n<\/article>\n<article class=\"in-article-card \" id=\"mini-post-14123\">\n\n  <time datetime=\"2012-07-09\" title=\"Originally published Sep 6, 2011\">\n    <strong>\n                \n      Almanac\n      <\/strong>\n\n    on\n\n    Aug 4, 2021  <\/time>\n\n  <h3>\n    <a href=\"https:\/\/css-tricks.com\/almanac\/properties\/p\/perspective-origin\/\">\n      perspective-origin    <\/a>\n  <\/h3>\n\n      <a href=\"https:\/\/css-tricks.com\/almanac\/properties\/p\/perspective-origin\/\" class=\"almanac-example\">\n      <code class=\"language-css\">.element { perspective-origin: 25% 75%; }<\/code>\n    <\/a>\n  \n  \n  <div class=\"author-row\">\n    <a href=\"https:\/\/css-tricks.com\/author\/chriscoyier\/\" aria-label=\"Author page of Chris Coyier\">\n      <img alt='' src='https:\/\/secure.gravatar.com\/avatar\/8081b26e05bb4354f7d65ffc34cbbd67?s=80&#038;d=retro&#038;r=pg' srcset='https:\/\/secure.gravatar.com\/avatar\/8081b26e05bb4354f7d65ffc34cbbd67?s=160&#038;d=retro&#038;r=pg 2x' class='avatar avatar-80 photo' height='80' width='80' \/>    <\/a>\n  \n    <a class=\"author-name\" href=\"https:\/\/css-tricks.com\/author\/chriscoyier\/\">\n      Chris Coyier    <\/a>\n  <\/div>\n\n<\/article>\n<article class=\"in-article-card \" id=\"mini-post-14123\">\n\n  <time datetime=\"2012-07-09\" title=\"Originally published Sep 6, 2011\">\n    <strong>\n                \n      Almanac\n      <\/strong>\n\n    on\n\n    Jul 14, 2021  <\/time>\n\n  <h3>\n    <a href=\"https:\/\/css-tricks.com\/almanac\/properties\/t\/transform-origin\/\">\n      transform-origin    <\/a>\n  <\/h3>\n\n      <a href=\"https:\/\/css-tricks.com\/almanac\/properties\/t\/transform-origin\/\" class=\"almanac-example\">\n      <code class=\"language-css\">.element { transform-origin: top left; }<\/code>\n    <\/a>\n  \n  \n  <div class=\"author-row\">\n    <a href=\"https:\/\/css-tricks.com\/author\/chriscoyier\/\" aria-label=\"Author page of Chris Coyier\">\n      <img alt='' src='https:\/\/secure.gravatar.com\/avatar\/8081b26e05bb4354f7d65ffc34cbbd67?s=80&#038;d=retro&#038;r=pg' srcset='https:\/\/secure.gravatar.com\/avatar\/8081b26e05bb4354f7d65ffc34cbbd67?s=160&#038;d=retro&#038;r=pg 2x' class='avatar avatar-80 photo' height='80' width='80' \/>    <\/a>\n  \n    <a class=\"author-name\" href=\"https:\/\/css-tricks.com\/author\/chriscoyier\/\">\n      Chris Coyier    <\/a>\n  <\/div>\n\n<\/article>\n<article class=\"in-article-card \" id=\"mini-post-14123\">\n\n  <time datetime=\"2012-07-09\" title=\"Originally published Sep 6, 2011\">\n    <strong>\n                \n      Almanac\n      <\/strong>\n\n    on\n\n    Jul 14, 2021  <\/time>\n\n  <h3>\n    <a href=\"https:\/\/css-tricks.com\/almanac\/properties\/t\/transform-style\/\">\n      transform-style    <\/a>\n  <\/h3>\n\n      <a href=\"https:\/\/css-tricks.com\/almanac\/properties\/t\/transform-style\/\" class=\"almanac-example\">\n      <code class=\"language-css\">.element { transform-style: preserve-3d; }<\/code>\n    <\/a>\n  \n  \n  <div class=\"author-row\">\n    <a href=\"https:\/\/css-tricks.com\/author\/chriscoyier\/\" aria-label=\"Author page of Chris Coyier\">\n      <img alt='' src='https:\/\/secure.gravatar.com\/avatar\/8081b26e05bb4354f7d65ffc34cbbd67?s=80&#038;d=retro&#038;r=pg' srcset='https:\/\/secure.gravatar.com\/avatar\/8081b26e05bb4354f7d65ffc34cbbd67?s=160&#038;d=retro&#038;r=pg 2x' class='avatar avatar-80 photo' height='80' width='80' \/>    <\/a>\n  \n    <a class=\"author-name\" href=\"https:\/\/css-tricks.com\/author\/chriscoyier\/\">\n      Chris Coyier    <\/a>\n  <\/div>\n\n<\/article>\n<article class=\"in-article-card \" id=\"mini-post-14123\">\n\n  <time datetime=\"2015-03-05\" title=\"Originally published Sep 6, 2011\">\n    <strong>\n                \n      Almanac\n      <\/strong>\n\n    on\n\n    Jul 14, 2021  <\/time>\n\n  <h3>\n    <a href=\"https:\/\/css-tricks.com\/almanac\/properties\/w\/will-change\/\">\n      will-change    <\/a>\n  <\/h3>\n\n      <a href=\"https:\/\/css-tricks.com\/almanac\/properties\/w\/will-change\/\" class=\"almanac-example\">\n      <code class=\"language-css\">.element { will-change: transform; }<\/code>\n    <\/a>\n  \n  \n  <div class=\"author-row\">\n    <a href=\"https:\/\/css-tricks.com\/author\/robinrendle\/\" aria-label=\"Author page of Robin Rendle\">\n      <img loading=\"lazy\" decoding=\"async\" alt=\"\" class=\"avatar avatar-80 photo avatar-default\" height=\"80\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/01\/me-black-white.jpg?resize=80%2C80&#038;ssl=1\" width=\"80\"  data-recalc-dims=\"1\">    <\/a>\n  \n    <a class=\"author-name\" href=\"https:\/\/css-tricks.com\/author\/robinrendle\/\">\n      Robin Rendle    <\/a>\n  <\/div>\n\n<\/article>\n    <\/div>\n  \n\n\n\n<p class=\"is-style-explanation ticss-e64cb9fc\"><strong>Random fact:<\/strong> a transform <a href=\"https:\/\/codepen.io\/chriscoyier\/pen\/zpdaxb?editors=0110\" rel=\"noopener\">creates a positioning context<\/a> just like <code>position: relative;<\/code><br>does.<\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"browser-support\">Browser support<\/h3>\n\n<h4 class=\"simpletoc-hidden wp-block-heading\" id=\"support-for-2d-transforms\">Support for 2D Transforms<\/h4>\n\n<div class=\"caniuse\"><div class=\"caniuse-header\"><p>This browser support data is from <a href=\"http:\/\/caniuse.com\/#feat=transforms2d\" 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\">4*<\/span><\/td><td class=\"y yep\" title=\"Firefox - \"><span class=\"caniuse-agents-version version\">3.5*<\/span><\/td><td class=\"y yep\" title=\"IE - \"><span class=\"caniuse-agents-version version\">9*<\/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\">3.1*<\/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\">123<\/span><\/td><td class=\"y yep\" title=\"Android Firefox - \"><span class=\"caniuse-agents-version version\">124<\/span><\/td><td class=\"y yep\" title=\"Android - \"><span class=\"caniuse-agents-version version\">2.1*<\/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<h4 class=\"simpletoc-hidden wp-block-heading\" id=\"support-for-3d-transforms\">Support for 3D Transforms<\/h4>\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\">123<\/span><\/td><td class=\"y yep\" title=\"Android Firefox - \"><span class=\"caniuse-agents-version version\">124<\/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","protected":false},"excerpt":{"rendered":"<p>The transform property allows you to visually manipulate an element by skewing, rotating, translating, or scaling:<\/p>\n","protected":false},"author":1036,"featured_media":0,"parent":13949,"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":356331,"url":"https:\/\/css-tricks.com\/almanac\/properties\/s\/scale\/","url_meta":{"origin":14123,"position":0},"title":"scale","date":"November 10, 2021","format":false,"excerpt":"The scale property in CSS resizes an element\u2019s width and height in proportion. So, if we have an element that\u2019s 100 pixels square, scaling it up by a value of 2 doubles the dimensions to 200 pixels square. Similarly, a scale value of .5 decreases the dimensions in half, resulting\u2026","rel":"","context":"Similar post","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/12\/css-tricks-logo-gradient-outline.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":14087,"url":"https:\/\/css-tricks.com\/almanac\/properties\/p\/padding\/","url_meta":{"origin":14123,"position":1},"title":"padding","date":"September 5, 2011","format":false,"excerpt":"The padding property in CSS defines the innermost portion of the box model, creating space around an element's content, inside of any defined margins and\/or borders. Padding values are set using lengths or percentages, and cannot accept negative values. The initial, or default, value for all padding properties is 0.\u2026","rel":"","context":"With 12 comments","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":13593,"url":"https:\/\/css-tricks.com\/snippets\/css\/stack-of-paper\/","url_meta":{"origin":14123,"position":2},"title":"Stacked Paper Effect","date":"August 15, 2011","format":false,"excerpt":"A popular design technique is to create a content container that looks like a sheet of paper and to stack other sheets of paper below it, adding a layered or three-dimensional style. We can create this effect using straight up CSS, but there are multiple types of stacked paper designs\u2026","rel":"","context":"With 12 comments","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":13264,"url":"https:\/\/css-tricks.com\/snippets\/css\/spinny-leaf-menu\/","url_meta":{"origin":14123,"position":3},"title":"Spinny Leaf Menu","date":"July 10, 2011","format":false,"excerpt":"Home Catalog Price About Contact nav { width: 960px; height: 100px; margin: 120px auto; text-align: center; } .top-menu li { display: inline-block; text-align: center; margin: 30px 5px; position: relative; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; } .top-menu li:hover { margin: 30px 20px; } .top-menu\u2026","rel":"","context":"With 17 comments","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":192751,"url":"https:\/\/css-tricks.com\/snippets\/sass\/centering-mixin\/","url_meta":{"origin":14123,"position":4},"title":"Centering Mixin","date":"January 9, 2015","format":false,"excerpt":"Assuming the parent element has position: relative;, these four properties will center a child element both horizontally and vertically inside, no matter what the width of height of either are. @mixin centerer { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .parent { position: relative; } .child {\u2026","rel":"","context":"With 12 comments","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":13978,"url":"https:\/\/css-tricks.com\/almanac\/properties\/b\/box-sizing\/","url_meta":{"origin":14123,"position":5},"title":"box-sizing","date":"August 31, 2011","format":false,"excerpt":"The box-sizing property in CSS controls how the box model is handled for the element it applies to. .module { box-sizing: border-box; } One of the more common ways to use it is to apply it to all elements on the page, pseudo elements included: *, *::before, *::after { box-sizing:\u2026","rel":"","context":"With 21 comments","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2010\/09\/widthbox.png?resize=350%2C200&ssl=1","width":350,"height":200},"classes":[]}],"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/14123"}],"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\/1036"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=14123"}],"version-history":[{"count":10,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/14123\/revisions"}],"predecessor-version":[{"id":376747,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/14123\/revisions\/376747"}],"up":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/13949"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=14123"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=14123"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}