{"id":356179,"date":"2021-11-08T11:00:53","date_gmt":"2021-11-08T19:00:53","guid":{"rendered":"https:\/\/css-tricks.com\/?page_id=356179"},"modified":"2021-11-10T16:23:49","modified_gmt":"2021-11-11T00:23:49","slug":"rotate","status":"publish","type":"page","link":"https:\/\/css-tricks.com\/almanac\/properties\/r\/rotate\/","title":{"rendered":"rotate"},"content":{"rendered":"\n<p>The <code>rotate<\/code> property in CSS turns an element around one or more axes. Think of it like poking one or more pins into an element and spinning the element around those points in clockwise and counter-clockwise directions measured in degree, gradian, radian, and turn values.<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">.element {\n  rotate: 45deg;\n}<\/code><\/pre>\n\n\n\n<!--more-->\n\n\n\n<p>While CSS already has another way to rotate elements using the <a href=https://css-tricks.com/"https:////css-tricks.com//complete-guide-to-css-functions//#rotatex-rotatey-rotatez-rotate3d-and-rotate\"><code>rotate()<\/code><\/a> function in the <code>transform<\/code> property, like this:<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">.element {\n  transform: rotate(45deg);\n}<\/code><\/pre>\n\n\n\n<p>\u2026the CSS <code>rotate<\/code> property does it independently of the <a href=https://css-tricks.com/"https:////css-tricks.com//almanac//properties//t//transform///"><code>transform<\/code><\/a> property altogether, plus the added benefit of being able to rotate along the Z-axis, something not currently possible with <code>transform: rotate()<\/code>.<\/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\">rotate: none | &lt;angle> | [ x | y | z | &lt;number>{3} ] &amp;&amp; &lt;angle>;<\/code><\/pre>\n\n\n\n<p>The angle values are expressed in degrees, gradians, radians, or turns.<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">\/* Keyword values *\/\nrotate: none;\n\n\/* Angle values *\/\nrotate: 45deg;\nrotate: 0.35turn;\nrotate: 1.27rad;\nrotate: -50grad;\n\n\/* x, y, or z-axis name plus angle *\/\nrotate: x 45deg;\nrotate: y 0.35turn;\nrotate: z 1.27rad;\n\n\/* Vector plus angle values *\/\nrotate: 1 0.5 1 45deg;\n\n\/* Global values *\/\nrotate: inherit;\nrotate: initial;\nrotate: revert;\nrotate: unset;<\/code><\/pre>\n\n\n\n<ul class=\"is-style-almanac-list\"><li>Initial: <code>none<\/code><\/li><li>Applies to: transformable elements<\/li><li>Inherited: no<\/li><li>Percentages: n\/a<\/li><li>Computed value: as specified<\/li><li>Animation type: a transform<\/li><li>Creates stacking context: yes<\/li><\/ul>\n\n\n<h3 class=\"wp-block-heading\" id=\"h-values\">Values<\/h3>\n\n\n<ul><li><strong><code>none<\/code>:<\/strong> Default value. No rotation is applied to the element.<\/li><li><strong><code>&lt;angle&gt;<\/code>:<\/strong> An <code>&lt;angle&gt;<\/code> value is used to specify a numeric value (expressed with <code>deg<\/code>, <code>grad<\/code>, <code>rad<\/code> or <code>turn<\/code> units) for how much to rotate the element around the Z axis. This value works exactly like the <a href=https://css-tricks.com/"https:////css-tricks.com//complete-guide-to-css-functions//#rotatex-rotatey-rotatez-rotate3d-and-rotate\"><code>rotate()<\/code><\/a> function we use with the transform` property.<\/li><li><strong>axis name with <code>&lt;angle&gt;<\/code> value: <\/strong>This identifies which axis (X, Y or Z)) to rotate around along with a numeric value for how much to rotate the element around that axis<\/li><li><strong>vector plus angle value:<\/strong> The three numbers represents an origin-centered vector that defines a line around which you want to rotate the element, plus an <code>&lt;angle&gt;<\/code> used to specify the angle to rotate the element through. Equivalent to a <code>rotate3d()<\/code> (3D rotation) function.<\/li><\/ul>\n\n\n<h3 class=\"wp-block-heading\" id=\"h-units\">Units<\/h3>\n\n\n<p>Most times, you\u2019ll likely find yourself using a degree unit (e.g. <code>45deg<\/code>) as a <code>rotate<\/code> property value. But as we\u2019ve seen, there are four total types of units that the property accepts. They\u2019re less common that, say, pixels, ems, rems, and percentages, so let\u2019s break them down to understand what they are and how they work.<\/p>\n\n\n\n<ul><li><strong><code>deg<\/code>:<\/strong> One degree is 1\/360 of a full circle.<\/li><li><strong><code>grad<\/code>:<\/strong> One gradian is 1\/400 of a full circle.<\/li><li><strong><code>rad<\/code>:<\/strong> A radian is the length of a circle\u2019s diameter around the shape\u2019s arc. One radian is <code>180deg<\/code>, or 1\/2 of a full circle. One full circle is 2\u03c0 radians, which is equal to <code>6.2832rad<\/code> or <code>360deg<\/code>.<\/li><li><strong><code>turn<\/code>:<\/strong> One turn is one full circle. So, halfway around a circle is equal to <code>.5turn<\/code>, or <code>180deg<\/code>.<\/li><\/ul>\n\n\n\n<p>The <code>rotate<\/code> property accepts any of these units, as they are different way of expressing the same idea: an angle around a circle. And they are <a href=https://css-tricks.com/"https:////developer.mozilla.org//en-US//docs//Web//CSS//angle#browser_compatibility\" rel=\"noopener\">equally supported by all major browsers<\/a>.<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_yLoePrb\" src=https://css-tricks.com/"////codepen.io//anon//embed//yLoePrb?height=450&amp;theme-id=1&amp;slug-hash=yLoePrb&amp;default-tab=result\%22 height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed yLoePrb\" title=\"CodePen Embed yLoePrb\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n<h3 class=\"wp-block-heading\" id=\"h-transitions-and-animations\">Transitions and animations<\/h3>\n\n\n<p>The <code>rotate<\/code> property supports CSS transitions and animations. That means we can transition from one angle to another on, say, hover:<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">.element {\n  rotate: 5deg;\n}\n\n.element:hover {\n  rotate: 45deg;\n  transition: rotate 1s;\n}<\/code><\/pre>\n\n\n\n<p>The same thing goes for CSS animations when working with <code>@keyframes<\/code>. We can use <code>rotate<\/code> when we define an animation like we can do with others:<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_gOxeOLg\" src=https://css-tricks.com/"////codepen.io//anon//embed//gOxeOLg?height=450&amp;theme-id=1&amp;slug-hash=gOxeOLg&amp;default-tab=result\%22 height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed gOxeOLg\" title=\"CodePen Embed gOxeOLg\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>We can implement more interesting and complex transitions and animations when we combine <code>rotate<\/code> with the <code>transform<\/code> functions, rotating an element independently of the transforms.<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_gOxPvOR\" src=https://css-tricks.com/"////codepen.io//anon//embed//gOxPvOR?height=450&amp;theme-id=1&amp;slug-hash=gOxPvOR&amp;default-tab=result\%22 height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed gOxPvOR\" title=\"CodePen Embed gOxPvOR\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>If you look at the browser support closely, you may want to consider a fallback solution that works with other browsers until <code>rotate<\/code> property gets full browser support. The <a href=https://css-tricks.com/"https:////css-tricks.com//almanac//properties//t//transform///"><code>transform<\/code><\/a> property is a viable fallback alternative for an independent transform property, such as <code>rotate<\/code>.<\/p>\n\n\n\n<p>For example, we could drop the <code>rotate<\/code> animation into an <code>@supports<\/code> block. This way, the animation only runs if the browser supports the <code>rotate<\/code> property:<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">\/* Using transform by default *\/\n@keyframes loader {\n  0% {\n    transform: rotate(0deg);\n  }\n  100% {\n    transform: rotate(180deg);\n  }\n}\n\n\/* Use rotate instead, but only if it is supported *\/\n@supports (rotate: 0deg) {\n  @keyframes loader {\n    0% {\n      rotate: 0deg;\n    }\n    100% {\n      rotate: 180deg;\n    }\n  }\n}<\/code><\/pre>\n\n\n\n<p>Speaking of which\u2026<\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"h-browser-support\">Browser support<\/h3>\n\n\n<script src=https://css-tricks.com/"https:////cdn.jsdelivr.net//gh//ireade//caniuse-embed//public//caniuse-embed.min.js/"><\/script>\n    \n<p class=\"ciu_embed\" data-feature=\"mdn-css__properties__rotate\" data-periods=\"future_1,current,past_1,past_2\" data-accessible-colours=\"false\"><\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"h-demo\">Demo<\/h3>\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_GRvoyMo\" src=https://css-tricks.com/"////codepen.io//anon//embed//GRvoyMo?height=450&amp;theme-id=1&amp;slug-hash=GRvoyMo&amp;default-tab=result\%22 height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed GRvoyMo\" title=\"CodePen Embed GRvoyMo\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n<h3 class=\"wp-block-heading\" id=\"h-more-information\">More information<\/h3>\n\n\n<ul><li><a href=https://css-tricks.com/"https:////drafts.csswg.org//css-transforms-2//#propdef-rotate\" rel=\"noopener\">CSS Transforms Module Level 2 specification<\/a> (Editor\u2019s draft)<\/li><li><a href=https://css-tricks.com/"https:////developer.mozilla.org//en-US//docs//Web//CSS//rotate/" rel=\"noopener\">MDN Web Docs<\/a><\/li><li><a href=https://css-tricks.com/"https:////caniuse.com//mdn-css_properties_rotate/" rel=\"noopener\">Caniuse<\/a><\/li><\/ul>\n\n\n<h3 class=\"wp-block-heading\" id=\"h-further-reading\">Further reading<\/h3>\n\n\n    \t\t\n    <div class=\"in-article-cards\">\n      <article class=\"in-article-card articles\" id=\"mini-post-356179\">\n\n  <time datetime=\"2020-03-30\" title=\"Originally published Nov 8, 2021\">\n    <strong>\n                \n        Article\n      <\/strong>\n\n    on\n\n    Mar 30, 2020  <\/time>\n\n  <h3>\n    <a href=https://css-tricks.com/"https:////css-tricks.com//how-they-fit-together-transform-translate-rotate-scale-and-offset///">\n      How They Fit Together: Transform, Translate, Rotate, Scale, and Offset    <\/a>\n  <\/h3>\n\n  \n  \n  <div class=\"author-row\">\n    <a href=https://css-tricks.com/"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&amp;d=retro&amp;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/"https:////css-tricks.com//author//chriscoyier///">\n      Chris Coyier    <\/a>\n  <\/div>\n\n<\/article>\n<article class=\"in-article-card articles\" id=\"mini-post-356179\">\n\n  <time datetime=\"2011-12-28\" title=\"Originally published Nov 8, 2021\">\n    <strong>\n                \n        Article\n      <\/strong>\n\n    on\n\n    Dec 30, 2020  <\/time>\n\n  <h3>\n    <a href=https://css-tricks.com/"https:////css-tricks.com//get-value-of-css-rotation-through-javascript///">\n      Get Value of CSS Rotation through JavaScript    <\/a>\n  <\/h3>\n\n  \n  \n  <div class=\"author-row\">\n    <a href=https://css-tricks.com/"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&amp;d=retro&amp;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/"https:////css-tricks.com//author//chriscoyier///">\n      Chris Coyier    <\/a>\n  <\/div>\n\n<\/article>\n    <\/div>\n  \n","protected":false},"excerpt":{"rendered":"<p>The rotate property in CSS turns an element around one or more axes. Think of it like poking one or [&hellip;]<\/p>\n","protected":false},"author":283746,"featured_media":294471,"parent":13945,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"page-almanac-single.php","meta":{"_acf_changed":false,"_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":"","_share_on_mastodon":"0","_share_on_mastodon_status":"%title% %permalink%"},"tags":[],"acf":[],"share_on_mastodon":{"url":"","error":""},"jetpack_sharing_enabled":true,"jetpack-related-posts":[],"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/356179"}],"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\/283746"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=356179"}],"version-history":[{"count":8,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/356179\/revisions"}],"predecessor-version":[{"id":356617,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/356179\/revisions\/356617"}],"up":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/13945"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media\/294471"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=356179"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=356179"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}