{"id":21237,"date":"2020-12-15T01:00:16","date_gmt":"2020-12-15T09:00:16","guid":{"rendered":"https:\/\/careerkarma.com\/blog\/?p=21237"},"modified":"2020-12-29T11:41:56","modified_gmt":"2020-12-29T19:41:56","slug":"css-rotate","status":"publish","type":"post","link":"https:\/\/careerkarma.com\/blog\/css-rotate\/","title":{"rendered":"Rotating Elements with CSS"},"content":{"rendered":"\n<p><em>The CSS rotate() function skews an element by a certain number of degrees. You can rotate an element clockwise using a positive number of degrees. Or, you can rotate an element anti-clockwise using a negative number.<\/em><\/p>\n\n\n\n<p>Today we\u2019ll learn how to rotate elements with CSS. Why should we rotate an element? Rotating elements make your web page more interactive. Used correctly, a rotating element will add to the aesthetics of your site. <\/p>\n\n\n\n<p>While reading this article, please refer to the <a href=\"https:\/\/github.com\/fbohz\/blogs_helper\/tree\/master\/css\/rotate\" target=\"_blank\" rel=\"noopener\" rel=\"nofollow\">accompanying repo<\/a>, so you can see the concepts in action. Knowing how to rotate an element will be a valuable addition to your CSS toolbox.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>CSS rotate()<\/strong><\/h2>\n\n\n\n<p>The CSS rotate() function lets you rotate an element on a 2D axis. The rotate() function accepts one argument: the angle at which you want to rotate your web element. You can rotate an element clockwise or counter-clockwise.<\/p>\n\n\n\n<p>Let&#8217;s take a look at the syntax for the rotate() function:<\/p>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre>transform: rotate(angle);<\/pre><\/div>\n\n\n\n<p>The value &#8220;angle&#8221; represents the number of degrees the element should rotate. You can specify a rotate that is clockwise using a positive degree number (i.e. 45). Or, you can rotate in the opposite direction using a negative degree value (i.e. -39).<\/p>\n\n\n\n<p>The rotate() function can apply to any HTML element. For instance, you could rotate a paragraph of text. Or you could rotate an image.<\/p>\n\n\n\n<p>A HTML rotate appears as soon as you render the page so there is no visible rotate. To view the rotating in action, you should use a <a href=\"https:\/\/careerkarma.com\/blog\/css-transitions\/\">CSS transition<\/a>. Transitions change the state of an element when an action is taken, such as when a cursor hovers over an element.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">rotate() CSS Example<\/h2>\n\n\n\n<p>Let\u2019s go ahead and create our HTML page on which to place a rotating box. Let&#8217;s add a box as a div and give it a class (let\u2019s name it \u201crotate\u201d).<\/p>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre>&lt;div class=&quot;rotate&quot;&gt;&lt;\/div&gt;<\/pre><\/div>\n\n\n\n<p>Now let&#8217;s add some styling to it:<\/p>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre>div.rotate {\n    width: 50px;\n    height: 50px;\n    background-color: chocolate;\n}<\/pre><\/div>\n\n\n\n<p>Refresh. Cool, we have a colored box. With this colored box, we have all that we need to start using the rotate() function.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh4.googleusercontent.com\/3B8ss_KhCkAcqfIill8qeslK-tmPHwSizlw1Rn9pm84J8QVkyTAMMp94XKMEmfQRiJZ0OZVsmm-Pa4_3Id1joyPz4ftfdMNUWvlxJmMJcw10uPms8TakfTqgQjFzU2yxu1rFoF19\" alt=\"Screen Shot 2020-08-12 at 8 09 12 PM\"\/><\/figure>\n\n\n\n<p>In order to rotate our box, we need to discuss the transform property first.<\/p>\n\n\n\n<p>The <a href=\"https:\/\/careerkarma.com\/blog\/css-2d-transforms\/\">CSS transform function<\/a> as the name implies, transforms elements. One of the functions we can apply to it, is <em>rotate()<\/em>. The transform property can take many other functions and there are many things we can do with transform. Rotate is just one of them.<\/p>\n\n\n\n<p>The rotate function moves an element. It takes one argument: the number of degrees we want to skew the element. Let\u2019s go ahead and apply a 35-degree positive rotation:<\/p>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre>div.rotate {\n    width: 50px;\n    height: 50px;\n    background-color: chocolate;\n    transform: rotate(35deg); \n}<\/pre><\/div>\n\n\n\n<p>We rotated our box! Tap yourself on the back.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh4.googleusercontent.com\/k2WRVjpbbIY4g3qSxF-ZItMja_LxmeVKW3t7ODH5QaaQjHgziKzbrpy7yXLh_Qxe5o287w3SlyX_JQVJZg8ekpqd75uFP5piOo2uM01Vo5Z-yWn5ZSbWiCJa6OeZIeAAeZfo5vgZ\" alt=\"Screen Shot 2020-08-12 at 8 21 25 PM\"\/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>When to Use the CSS Transform rotate() Function<\/strong><\/h2>\n\n\n\n<p>Rotate allows for fancy UI ideas or rotating images. For example, you can rotate 180 degrees an image. If you need that rotated image somewhere else just save it and use it accordingly. <\/p>\n\n\n\n<p>Another thing you can rotate is text. Let\u2019s say you are creating a layout that mimics a magazine, you can actually rotate the text to add emphasis to text elements.&nbsp;<\/p>\n\n\n\n<p>And that is not all you can do with <em>rotate()<\/em>. The rotate function allows us to do some really cool <strong>animations<\/strong>!<\/p>\n\n\n\n<p>Let\u2019s go ahead and use the <a href=\"https:\/\/careerkarma.com\/blog\/css-hover\/\">CSS :hover selector<\/a> on our div to actually apply a nice rotation effect:<\/p>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre>.rotate:hover {\n    transform: rotate(35deg); \n    background-color: deeppink;\n}<\/pre><\/div>\n\n\n\n<p>Isn&#8217;t this cool? \ud83d\ude0e<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh5.googleusercontent.com\/M0zNUH2FmqHvsFY0o0GhbJ33RliNiJ2mqU2bKn1wjxT2or9T3owt414FSvaD5lCb9m-qhj4IWOYAnui1Gwiehj3EIgoJbM1489aPm-1yDhsCZGLYUg5H2nZk437vWHHfZM_sbCHb\" alt=\"gif-20-31-51\"\/><\/figure>\n\n\n\n<p>Our box rotates when we hover over it with a mouse. We use the background-color CSS property to change the color of our box when we hover over it.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Conclusion<\/h2>\n\n\n\n<p>The CSS rotate() function makes a web element appear at an angle. This function accepts one argument: the number of degrees the element should be rotated. You can specify either a positive or negative degree value.<\/p>\n\n\n\n<p>Rotating elements lets you make your web pages more aesthetically pleasing. For instance, you may apply a rotate to a box when the user hovers over it with their cursor. Or you may decide to rotate a link when a user hovers over it with their mouse. It&#8217;s up to you how you use this skill!<\/p>\n\n\n\n<p>Are you interested in learning more about CSS? Check out our complete <a href=\"https:\/\/careerkarma.com\/blog\/learn-css\/\">How to Learn CSS guide<\/a> for expert advice and guidance on top learning resources.<\/p>\n","protected":false},"excerpt":{"rendered":"The CSS rotate() function skews an element by a certain number of degrees. You can rotate an element clockwise using a positive number of degrees. Or, you can rotate an element anti-clockwise using a negative number. Today we\u2019ll learn how to rotate elements with CSS. Why should we rotate an element? Rotating elements make your&hellip;","protected":false},"author":86,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[17287],"tags":[],"class_list":{"0":"post-21237","1":"post","2":"type-post","3":"status-publish","4":"format-standard","6":"category-css"},"acf":{"post_sub_title":"","sprint_id":"","query_class":"CSS","school_sft":"","parent_sft":"","school_privacy_policy":"","has_review":null,"is_sponser_post":"","is_guest_post":""},"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v27.4 (Yoast SEO v27.4) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>Rotating Elements with CSS: A Step By Step Guide | Career Karma<\/title>\n<meta name=\"description\" content=\"Learn how to rotate elements with CSS and its useful applications. Learn CSS with CareerKarma.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/careerkarma.com\/blog\/css-rotate\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Rotating Elements with CSS\" \/>\n<meta property=\"og:description\" content=\"Learn how to rotate elements with CSS and its useful applications. Learn CSS with CareerKarma.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/careerkarma.com\/blog\/css-rotate\/\" \/>\n<meta property=\"og:site_name\" content=\"Career Karma\" \/>\n<meta property=\"article:publisher\" content=\"http:\/\/facebook.com\/careerkarmaapp\" \/>\n<meta property=\"article:published_time\" content=\"2020-12-15T09:00:16+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2020-12-29T19:41:56+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/lh4.googleusercontent.com\/3B8ss_KhCkAcqfIill8qeslK-tmPHwSizlw1Rn9pm84J8QVkyTAMMp94XKMEmfQRiJZ0OZVsmm-Pa4_3Id1joyPz4ftfdMNUWvlxJmMJcw10uPms8TakfTqgQjFzU2yxu1rFoF19\" \/>\n<meta name=\"author\" content=\"Felipe Boh\u00f3rquez\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@career_karma\" \/>\n<meta name=\"twitter:site\" content=\"@career_karma\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Felipe Boh\u00f3rquez\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"4 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/css-rotate\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/css-rotate\\\/\"},\"author\":{\"name\":\"Felipe Boh\u00f3rquez\",\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/#\\\/schema\\\/person\\\/e2cbf72dcbfaf9e81a8b6a38c1bd4220\"},\"headline\":\"Rotating Elements with CSS\",\"datePublished\":\"2020-12-15T09:00:16+00:00\",\"dateModified\":\"2020-12-29T19:41:56+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/css-rotate\\\/\"},\"wordCount\":711,\"commentCount\":0,\"image\":{\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/css-rotate\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/lh4.googleusercontent.com\\\/3B8ss_KhCkAcqfIill8qeslK-tmPHwSizlw1Rn9pm84J8QVkyTAMMp94XKMEmfQRiJZ0OZVsmm-Pa4_3Id1joyPz4ftfdMNUWvlxJmMJcw10uPms8TakfTqgQjFzU2yxu1rFoF19\",\"articleSection\":[\"CSS\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/careerkarma.com\\\/blog\\\/css-rotate\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/css-rotate\\\/\",\"url\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/css-rotate\\\/\",\"name\":\"Rotating Elements with CSS: A Step By Step Guide | Career Karma\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/css-rotate\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/css-rotate\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/lh4.googleusercontent.com\\\/3B8ss_KhCkAcqfIill8qeslK-tmPHwSizlw1Rn9pm84J8QVkyTAMMp94XKMEmfQRiJZ0OZVsmm-Pa4_3Id1joyPz4ftfdMNUWvlxJmMJcw10uPms8TakfTqgQjFzU2yxu1rFoF19\",\"datePublished\":\"2020-12-15T09:00:16+00:00\",\"dateModified\":\"2020-12-29T19:41:56+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/#\\\/schema\\\/person\\\/e2cbf72dcbfaf9e81a8b6a38c1bd4220\"},\"description\":\"Learn how to rotate elements with CSS and its useful applications. Learn CSS with CareerKarma.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/css-rotate\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/careerkarma.com\\\/blog\\\/css-rotate\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/css-rotate\\\/#primaryimage\",\"url\":\"https:\\\/\\\/lh4.googleusercontent.com\\\/3B8ss_KhCkAcqfIill8qeslK-tmPHwSizlw1Rn9pm84J8QVkyTAMMp94XKMEmfQRiJZ0OZVsmm-Pa4_3Id1joyPz4ftfdMNUWvlxJmMJcw10uPms8TakfTqgQjFzU2yxu1rFoF19\",\"contentUrl\":\"https:\\\/\\\/lh4.googleusercontent.com\\\/3B8ss_KhCkAcqfIill8qeslK-tmPHwSizlw1Rn9pm84J8QVkyTAMMp94XKMEmfQRiJZ0OZVsmm-Pa4_3Id1joyPz4ftfdMNUWvlxJmMJcw10uPms8TakfTqgQjFzU2yxu1rFoF19\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/css-rotate\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Blog\",\"item\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"CSS\",\"item\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/css\\\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Rotating Elements with CSS\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/\",\"name\":\"Career Karma\",\"description\":\"Latest Coding Bootcamp News &amp; Career Hacks from Industry Insiders\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/#\\\/schema\\\/person\\\/e2cbf72dcbfaf9e81a8b6a38c1bd4220\",\"name\":\"Felipe Boh\u00f3rquez\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/wp-content\\\/uploads\\\/2020\\\/08\\\/Screen-Shot-2020-08-17-at-11.10.42-AM-150x150.png\",\"url\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/wp-content\\\/uploads\\\/2020\\\/08\\\/Screen-Shot-2020-08-17-at-11.10.42-AM-150x150.png\",\"contentUrl\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/wp-content\\\/uploads\\\/2020\\\/08\\\/Screen-Shot-2020-08-17-at-11.10.42-AM-150x150.png\",\"caption\":\"Felipe Boh\u00f3rquez\"},\"description\":\"Felipe Boh\u00f3rquez is a Software Engineer and technical writer at Career Karma. He covers all things frontend and backend development.\",\"url\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/author\\\/felipe-bohorquez\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Rotating Elements with CSS: A Step By Step Guide | Career Karma","description":"Learn how to rotate elements with CSS and its useful applications. Learn CSS with CareerKarma.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/careerkarma.com\/blog\/css-rotate\/","og_locale":"en_US","og_type":"article","og_title":"Rotating Elements with CSS","og_description":"Learn how to rotate elements with CSS and its useful applications. Learn CSS with CareerKarma.","og_url":"https:\/\/careerkarma.com\/blog\/css-rotate\/","og_site_name":"Career Karma","article_publisher":"http:\/\/facebook.com\/careerkarmaapp","article_published_time":"2020-12-15T09:00:16+00:00","article_modified_time":"2020-12-29T19:41:56+00:00","og_image":[{"url":"https:\/\/lh4.googleusercontent.com\/3B8ss_KhCkAcqfIill8qeslK-tmPHwSizlw1Rn9pm84J8QVkyTAMMp94XKMEmfQRiJZ0OZVsmm-Pa4_3Id1joyPz4ftfdMNUWvlxJmMJcw10uPms8TakfTqgQjFzU2yxu1rFoF19","type":"","width":"","height":""}],"author":"Felipe Boh\u00f3rquez","twitter_card":"summary_large_image","twitter_creator":"@career_karma","twitter_site":"@career_karma","twitter_misc":{"Written by":"Felipe Boh\u00f3rquez","Est. reading time":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/careerkarma.com\/blog\/css-rotate\/#article","isPartOf":{"@id":"https:\/\/careerkarma.com\/blog\/css-rotate\/"},"author":{"name":"Felipe Boh\u00f3rquez","@id":"https:\/\/careerkarma.com\/blog\/#\/schema\/person\/e2cbf72dcbfaf9e81a8b6a38c1bd4220"},"headline":"Rotating Elements with CSS","datePublished":"2020-12-15T09:00:16+00:00","dateModified":"2020-12-29T19:41:56+00:00","mainEntityOfPage":{"@id":"https:\/\/careerkarma.com\/blog\/css-rotate\/"},"wordCount":711,"commentCount":0,"image":{"@id":"https:\/\/careerkarma.com\/blog\/css-rotate\/#primaryimage"},"thumbnailUrl":"https:\/\/lh4.googleusercontent.com\/3B8ss_KhCkAcqfIill8qeslK-tmPHwSizlw1Rn9pm84J8QVkyTAMMp94XKMEmfQRiJZ0OZVsmm-Pa4_3Id1joyPz4ftfdMNUWvlxJmMJcw10uPms8TakfTqgQjFzU2yxu1rFoF19","articleSection":["CSS"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/careerkarma.com\/blog\/css-rotate\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/careerkarma.com\/blog\/css-rotate\/","url":"https:\/\/careerkarma.com\/blog\/css-rotate\/","name":"Rotating Elements with CSS: A Step By Step Guide | Career Karma","isPartOf":{"@id":"https:\/\/careerkarma.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/careerkarma.com\/blog\/css-rotate\/#primaryimage"},"image":{"@id":"https:\/\/careerkarma.com\/blog\/css-rotate\/#primaryimage"},"thumbnailUrl":"https:\/\/lh4.googleusercontent.com\/3B8ss_KhCkAcqfIill8qeslK-tmPHwSizlw1Rn9pm84J8QVkyTAMMp94XKMEmfQRiJZ0OZVsmm-Pa4_3Id1joyPz4ftfdMNUWvlxJmMJcw10uPms8TakfTqgQjFzU2yxu1rFoF19","datePublished":"2020-12-15T09:00:16+00:00","dateModified":"2020-12-29T19:41:56+00:00","author":{"@id":"https:\/\/careerkarma.com\/blog\/#\/schema\/person\/e2cbf72dcbfaf9e81a8b6a38c1bd4220"},"description":"Learn how to rotate elements with CSS and its useful applications. Learn CSS with CareerKarma.","breadcrumb":{"@id":"https:\/\/careerkarma.com\/blog\/css-rotate\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/careerkarma.com\/blog\/css-rotate\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/careerkarma.com\/blog\/css-rotate\/#primaryimage","url":"https:\/\/lh4.googleusercontent.com\/3B8ss_KhCkAcqfIill8qeslK-tmPHwSizlw1Rn9pm84J8QVkyTAMMp94XKMEmfQRiJZ0OZVsmm-Pa4_3Id1joyPz4ftfdMNUWvlxJmMJcw10uPms8TakfTqgQjFzU2yxu1rFoF19","contentUrl":"https:\/\/lh4.googleusercontent.com\/3B8ss_KhCkAcqfIill8qeslK-tmPHwSizlw1Rn9pm84J8QVkyTAMMp94XKMEmfQRiJZ0OZVsmm-Pa4_3Id1joyPz4ftfdMNUWvlxJmMJcw10uPms8TakfTqgQjFzU2yxu1rFoF19"},{"@type":"BreadcrumbList","@id":"https:\/\/careerkarma.com\/blog\/css-rotate\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Blog","item":"https:\/\/careerkarma.com\/blog\/"},{"@type":"ListItem","position":2,"name":"CSS","item":"https:\/\/careerkarma.com\/blog\/css\/"},{"@type":"ListItem","position":3,"name":"Rotating Elements with CSS"}]},{"@type":"WebSite","@id":"https:\/\/careerkarma.com\/blog\/#website","url":"https:\/\/careerkarma.com\/blog\/","name":"Career Karma","description":"Latest Coding Bootcamp News &amp; Career Hacks from Industry Insiders","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/careerkarma.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/careerkarma.com\/blog\/#\/schema\/person\/e2cbf72dcbfaf9e81a8b6a38c1bd4220","name":"Felipe Boh\u00f3rquez","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/08\/Screen-Shot-2020-08-17-at-11.10.42-AM-150x150.png","url":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/08\/Screen-Shot-2020-08-17-at-11.10.42-AM-150x150.png","contentUrl":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/08\/Screen-Shot-2020-08-17-at-11.10.42-AM-150x150.png","caption":"Felipe Boh\u00f3rquez"},"description":"Felipe Boh\u00f3rquez is a Software Engineer and technical writer at Career Karma. He covers all things frontend and backend development.","url":"https:\/\/careerkarma.com\/blog\/author\/felipe-bohorquez\/"}]}},"_links":{"self":[{"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/posts\/21237","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/users\/86"}],"replies":[{"embeddable":true,"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/comments?post=21237"}],"version-history":[{"count":0,"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/posts\/21237\/revisions"}],"wp:attachment":[{"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/media?parent=21237"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/categories?post=21237"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/tags?post=21237"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}