{"id":4976,"date":"2015-06-18T12:15:58","date_gmt":"2015-06-18T09:15:58","guid":{"rendered":"http:\/\/www.webcodegeeks.com\/?p=4976"},"modified":"2018-01-08T14:34:16","modified_gmt":"2018-01-08T12:34:16","slug":"css-rotate-text-example","status":"publish","type":"post","link":"https:\/\/www.webcodegeeks.com\/css\/css-rotate-text-example\/","title":{"rendered":"CSS Rotate Text Example"},"content":{"rendered":"<p>In this example, we&#8217;ll talk about the rotate value of the transform property of css and specifically about rotating text elements in html.<\/p>\n<p>Because the rotation of text is achieved using the <code>transform<\/code> property, like for other element rotation, it is supported by all modern browsers.<\/p>\n<p>You may use text rotation using css when you want to have fancy text around your webpage or when it is part of your website style.<\/p>\n<p>Let&#8217;s first see the basic application and then cases and examples of a more advanced use of this considering nicely designed cases.<br \/>\n&nbsp;<br \/>\n&nbsp;<br \/>\n[ulp id=&#8217;nAkUl5IbAjqlXSla&#8217;]<\/p>\n<h2>1. Basic Setup and Application <\/h2>\n<p>Go ahead and create a new html document and add the basic sytnax in it like so:<\/p>\n<pre class=\"brush:xml\">\r\n&lt;!DOCTYPE html&gt;\r\n&lt;html&gt;\r\n&lt;head&gt;\r\n\t&lt;title&gt;CSS Rotate Text Example&lt;\/title&gt;\r\n&lt;\/head&gt;\r\n&lt;body&gt;\r\n\r\n&lt;!-- STYLE SECTION --&gt;\r\n\r\n&lt;style type=\"text\/css\"&gt;\r\n\r\n&lt;\/style&gt;\r\n\r\n&lt;!-- HTML SECTION --&gt;\r\n\r\n&lt;\/body&gt;\r\n&lt;\/html&gt;\r\n<\/pre>\n<p>To apply text rotation lets first explain what is behind it in css:<\/p>\n<p>1. <code>transform<\/code> &#8211; css property that specifies object transformation <\/p>\n<p>2. <code>rotate<\/code> &#8211; defines specifically the kind of transformation that is going to happen<\/p>\n<p>3. <code>(numberdeg)<\/code> &#8211; specifies the value of degrees in which the rotation will occur<\/p>\n<p>Add a text line in html to create a text element:<\/p>\n<pre class=\"brush:xml\">\r\n&lt;!-- HTML SECTION  --&gt;\r\n\r\n&lt;h2&gt;This is the rotated text.&lt;\/h2&gt;\r\n<\/pre>\n<p>Now go over css and refer to <code>h2<\/code> to give it rotation attributes like below:<\/p>\n<pre class=\"brush:css\">\r\n&lt;!-- STYLE  SECTION --&gt;\r\n\r\n&lt;style type=\"text\/css\"&gt;\r\n\r\nh2 {\r\n\ttransform: rotate(-20deg);\r\n}\r\n\r\n&lt;\/style&gt;\r\n<\/pre>\n<p>Considering cross-browser compatibility, you would have to take into consideration this approach:<\/p>\n<pre class=\"brush:css\">\r\nh2 {\r\n\r\n          \/* Safari *\/\r\n          -webkit-transform: rotate(-20deg);\r\n\r\n          \/* Firefox *\/\r\n          -moz-transform: rotate(-20deg);\r\n\r\n           \/* IE *\/\r\n          -ms-transform: rotate(-20deg);\r\n\r\n           \/* Opera *\/\r\n          -o-transform: rotate(-20deg);\r\n\r\n           \/* Internet Explorer *\/\r\n           filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);\r\n\r\n}\r\n<\/pre>\n<p>The rotated text would look like this in the browser:<br \/>\n<figure id=\"attachment_4985\" aria-describedby=\"caption-attachment-4985\" style=\"width: 820px\" class=\"wp-caption aligncenter\"><a href=\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2015\/05\/text-rotate1.jpg\"><img decoding=\"async\" src=\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2015\/05\/text-rotate1.jpg\" alt=\"Basic Text-Rotation Applied\" width=\"820\" height=\"191\" class=\"size-full wp-image-4985\" srcset=\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2015\/05\/text-rotate1.jpg 820w, https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2015\/05\/text-rotate1-300x70.jpg 300w\" sizes=\"(max-width: 820px) 100vw, 820px\" \/><\/a><figcaption id=\"caption-attachment-4985\" class=\"wp-caption-text\">Basic Text-Rotation Applied<\/figcaption><\/figure><\/p>\n<h2>2. Cases and Examples <\/h2>\n<p>In this section we&#8217;ll see some nice applications of the text rotation accross webpages you might consider using.<\/p>\n<h3>2.1 Date Example <\/h3>\n<p>Here lets turn things comfortable to create a date view using some rotated text. Basically, it is just playing around with <\/p>\n<p>positioning and margins\/padding alongside with the transform property in order to rotate text. Create the markup below:<\/p>\n<pre class=\"brush:xml\">\r\n&lt;!-- HTML SECTION  --&gt;\r\n\r\n&lt;h2 class=\"date\"&gt;31&lt;\/h2&gt;\r\n&lt;h2 class=\"month\"&gt;JUNE&lt;\/h2&gt;\r\n&lt;h2 class=\"year\"&gt;2015&lt;\/h2&gt;\r\n<\/pre>\n<p>Above, I have added three <code>h2<\/code> tags and given specific classes according to what they represent.<\/p>\n<p>Now applying the following css:<\/p>\n<pre class=\"brush:css\">\r\n.date {\r\n\tposition: relative;\r\n\tfloat: left;\r\n\tpadding-right: 1em;\r\n\tfont-size: 5em;\r\n}\r\n\r\n.month {\r\n\ttransform: rotate(-90deg);\r\n\tposition: absolute;\r\n\tpadding: 3.3em 3em;\r\n}\r\n\r\n.year {\r\n\tposition: absolute;\r\n\tpadding-top: 2em;\r\n\tfont-size: 3.2em;\r\n}\r\n<\/pre>\n<p>The result would be a date with a large date number, a vertical month text and a large year number like so:<br \/>\n<figure id=\"attachment_4994\" aria-describedby=\"caption-attachment-4994\" style=\"width: 820px\" class=\"wp-caption aligncenter\"><a href=\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2015\/05\/text-rotate2.jpg\"><img decoding=\"async\" src=\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2015\/05\/text-rotate2.jpg\" alt=\"A Date Example of Text Rotation\" width=\"820\" height=\"211\" class=\"size-full wp-image-4994\" srcset=\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2015\/05\/text-rotate2.jpg 820w, https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2015\/05\/text-rotate2-300x77.jpg 300w\" sizes=\"(max-width: 820px) 100vw, 820px\" \/><\/a><figcaption id=\"caption-attachment-4994\" class=\"wp-caption-text\">A Date Example of Text Rotation<\/figcaption><\/figure><\/p>\n<h3>2.2 Text Example 1<\/h3>\n<p>Just like above, you can use this style of 90degrees rotated text whenever it feels right for you.<\/p>\n<p>&#8211;<strong>HTML<\/strong><\/p>\n<pre class=\"brush:xml\">\r\n&lt;h2 class=\"where\"&gt;WHERE&lt;\/h2&gt;\r\n&lt;h2 class=\"are\"&gt;ARE&lt;\/h2&gt;\r\n&lt;h2 class=\"you\"&gt;YOU?&lt;\/h2&gt;\r\n<\/pre>\n<p>&#8211;<strong>CSS<\/strong><\/p>\n<pre class=\"brush:css\">\r\n.where {\r\n\tposition: relative;\r\n\tfont-size: 4.5em;\r\n\tmargin: 0;\r\n}\r\n\r\n.are {\r\n\ttransform: rotate(-90deg);\r\n\tposition: absolute;\r\n\tfont-size: 2em;\r\n}\r\n\r\n.you {\r\n\tposition: absolute;\r\n\tfont-size: 5em;\r\n\tmargin: 0;\r\n\tpadding-left: 0.8em;\r\n<\/pre>\n<p>The view in the browser would be:<br \/>\n<figure id=\"attachment_4997\" aria-describedby=\"caption-attachment-4997\" style=\"width: 820px\" class=\"wp-caption aligncenter\"><a href=\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2015\/05\/text-rotate3.jpg\"><img decoding=\"async\" src=\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2015\/05\/text-rotate3.jpg\" alt=\"Text Example of Rotation\" width=\"820\" height=\"211\" class=\"size-full wp-image-4997\" srcset=\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2015\/05\/text-rotate3.jpg 820w, https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2015\/05\/text-rotate3-300x77.jpg 300w\" sizes=\"(max-width: 820px) 100vw, 820px\" \/><\/a><figcaption id=\"caption-attachment-4997\" class=\"wp-caption-text\">Text Example of Rotation<\/figcaption><\/figure><\/p>\n<h3>2.3 Text Example 2<\/h3>\n<p>Here we see another fancy positioning of text that is rotated in different degrees. Create the markup below:<\/p>\n<pre class=\"brush:xml\">\r\n&lt;h3 class=\"first\"&gt;This is the first line on WCG&lt;\/h3&gt;\r\n&lt;h3 class=\"main\"&gt;This is the main line on WCG&lt;\/h3&gt;\r\n&lt;h3 class=\"second\"&gt;This is the second line on WCG&lt;\/h3&gt;\r\n<\/pre>\n<p>Use css to manipulate rotation and positioning:<\/p>\n<pre class=\"brush:css\">\r\n.first {\r\n\ttransform: rotate(-20deg);\r\n\tposition: relative;\r\n\tpadding: 9em 7em;\r\n\r\n}\r\n\r\n.second {\r\n\tposition: absolute;\r\n\ttransform: rotate(20deg);\r\n\tpadding: 9em;\r\n}\r\n\r\n.main {\r\n\tposition: absolute;\r\n\tpadding: 4.5em 10em;\r\n}\r\n<\/pre>\n<p>The result would be this:<br \/>\n<figure id=\"attachment_4999\" aria-describedby=\"caption-attachment-4999\" style=\"width: 820px\" class=\"wp-caption aligncenter\"><a href=\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2015\/05\/text-rotate4.jpg\"><img decoding=\"async\" src=\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2015\/05\/text-rotate4.jpg\" alt=\"Text Example 2 of Text Rotation\" width=\"820\" height=\"345\" class=\"size-full wp-image-4999\" srcset=\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2015\/05\/text-rotate4.jpg 820w, https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2015\/05\/text-rotate4-300x126.jpg 300w\" sizes=\"(max-width: 820px) 100vw, 820px\" \/><\/a><figcaption id=\"caption-attachment-4999\" class=\"wp-caption-text\">Text Example 2 of Text Rotation<\/figcaption><\/figure><\/p>\n<h2>3. Conclusion<\/h2>\n<p>To conclude, we can say that you can use text rotation for several reasons, but do remember that to align it properly with other elements you have to play with positioning and margins. It is not so comfortable to apply quickly somewhere.<\/p>\n<p>However, for those who needs special views on elements (like the date we saw), feel free to test what best fits for you.<\/p>\n<h2>4. Download <\/h4>\n<div class=\"download\">\nYou can download the full source code of this example here: <a href=\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2015\/05\/CSS3-Rotate-Text.zip\"><strong>CSS3 Rotate Text<\/strong><\/a><\/div>\n","protected":false},"excerpt":{"rendered":"<p>In this example, we&#8217;ll talk about the rotate value of the transform property of css and specifically about rotating text elements in html. Because the rotation of text is achieved using the transform property, like for other element rotation, it is supported by all modern browsers. You may use text rotation using css when you &hellip;<\/p>\n","protected":false},"author":75,"featured_media":917,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[11],"tags":[],"class_list":["post-4976","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-css"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.5 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>CSS Rotate Text Example - Web Code Geeks - 2026<\/title>\n<meta name=\"description\" content=\"In this example, we&#039;ll talk about the rotate value of the transform property of css and specifically about rotating text elements in html. Because the\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.webcodegeeks.com\/css\/css-rotate-text-example\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"CSS Rotate Text Example - Web Code Geeks - 2026\" \/>\n<meta property=\"og:description\" content=\"In this example, we&#039;ll talk about the rotate value of the transform property of css and specifically about rotating text elements in html. Because the\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.webcodegeeks.com\/css\/css-rotate-text-example\/\" \/>\n<meta property=\"og:site_name\" content=\"Web Code Geeks\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/webcodegeeks\" \/>\n<meta property=\"article:author\" content=\"https:\/\/www.facebook.com\/fabiocimo\" \/>\n<meta property=\"article:published_time\" content=\"2015-06-18T09:15:58+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2018-01-08T12:34:16+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/css3-logo.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"150\" \/>\n\t<meta property=\"og:image:height\" content=\"150\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Fabio Cimo\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@fabiocimo\" \/>\n<meta name=\"twitter:site\" content=\"@webcodegeeks\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Fabio Cimo\" \/>\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:\/\/www.webcodegeeks.com\/css\/css-rotate-text-example\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/css\/css-rotate-text-example\/\"},\"author\":{\"name\":\"Fabio Cimo\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/1dfb88b4a8d08c37a6080311fd330a22\"},\"headline\":\"CSS Rotate Text Example\",\"datePublished\":\"2015-06-18T09:15:58+00:00\",\"dateModified\":\"2018-01-08T12:34:16+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/css\/css-rotate-text-example\/\"},\"wordCount\":510,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/#organization\"},\"image\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/css\/css-rotate-text-example\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/css3-logo.jpg\",\"articleSection\":[\"CSS\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.webcodegeeks.com\/css\/css-rotate-text-example\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.webcodegeeks.com\/css\/css-rotate-text-example\/\",\"url\":\"https:\/\/www.webcodegeeks.com\/css\/css-rotate-text-example\/\",\"name\":\"CSS Rotate Text Example - Web Code Geeks - 2026\",\"isPartOf\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/css\/css-rotate-text-example\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/css\/css-rotate-text-example\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/css3-logo.jpg\",\"datePublished\":\"2015-06-18T09:15:58+00:00\",\"dateModified\":\"2018-01-08T12:34:16+00:00\",\"description\":\"In this example, we'll talk about the rotate value of the transform property of css and specifically about rotating text elements in html. Because the\",\"breadcrumb\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/css\/css-rotate-text-example\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.webcodegeeks.com\/css\/css-rotate-text-example\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.webcodegeeks.com\/css\/css-rotate-text-example\/#primaryimage\",\"url\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/css3-logo.jpg\",\"contentUrl\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/css3-logo.jpg\",\"width\":150,\"height\":150},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.webcodegeeks.com\/css\/css-rotate-text-example\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.webcodegeeks.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"CSS\",\"item\":\"https:\/\/www.webcodegeeks.com\/category\/css\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"CSS Rotate Text Example\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#website\",\"url\":\"https:\/\/www.webcodegeeks.com\/\",\"name\":\"Web Code Geeks\",\"description\":\"Web Developers Resource Center\",\"publisher\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.webcodegeeks.com\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#organization\",\"name\":\"Exelixis Media P.C.\",\"url\":\"https:\/\/www.webcodegeeks.com\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2022\/06\/exelixis-logo.png\",\"contentUrl\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2022\/06\/exelixis-logo.png\",\"width\":864,\"height\":246,\"caption\":\"Exelixis Media P.C.\"},\"image\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/webcodegeeks\",\"https:\/\/x.com\/webcodegeeks\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/1dfb88b4a8d08c37a6080311fd330a22\",\"name\":\"Fabio Cimo\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/b3df055f2e1b62e238889fafbb16121c68aab1adcd11af670e185cafae201b3b?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/b3df055f2e1b62e238889fafbb16121c68aab1adcd11af670e185cafae201b3b?s=96&d=mm&r=g\",\"caption\":\"Fabio Cimo\"},\"description\":\"Fabio is a passionate student in web tehnologies including front-end (HTML\/CSS) and web design. He likes exploring as much as possible about the world wide web and how it can be more productive for us all. Currently he studies Computer Engineering, at the same time he works as a freelancer on both web programming and graphic design.\",\"sameAs\":[\"https:\/\/www.facebook.com\/fabiocimo\",\"https:\/\/al.linkedin.com\/in\/fabiocimo\",\"https:\/\/x.com\/fabiocimo\",\"https:\/\/www.youtube.com\/fabiocimo1\"],\"url\":\"https:\/\/www.webcodegeeks.com\/author\/fabio-cimo\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"CSS Rotate Text Example - Web Code Geeks - 2026","description":"In this example, we'll talk about the rotate value of the transform property of css and specifically about rotating text elements in html. Because the","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:\/\/www.webcodegeeks.com\/css\/css-rotate-text-example\/","og_locale":"en_US","og_type":"article","og_title":"CSS Rotate Text Example - Web Code Geeks - 2026","og_description":"In this example, we'll talk about the rotate value of the transform property of css and specifically about rotating text elements in html. Because the","og_url":"https:\/\/www.webcodegeeks.com\/css\/css-rotate-text-example\/","og_site_name":"Web Code Geeks","article_publisher":"https:\/\/www.facebook.com\/webcodegeeks","article_author":"https:\/\/www.facebook.com\/fabiocimo","article_published_time":"2015-06-18T09:15:58+00:00","article_modified_time":"2018-01-08T12:34:16+00:00","og_image":[{"width":150,"height":150,"url":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/css3-logo.jpg","type":"image\/jpeg"}],"author":"Fabio Cimo","twitter_card":"summary_large_image","twitter_creator":"@fabiocimo","twitter_site":"@webcodegeeks","twitter_misc":{"Written by":"Fabio Cimo","Est. reading time":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.webcodegeeks.com\/css\/css-rotate-text-example\/#article","isPartOf":{"@id":"https:\/\/www.webcodegeeks.com\/css\/css-rotate-text-example\/"},"author":{"name":"Fabio Cimo","@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/1dfb88b4a8d08c37a6080311fd330a22"},"headline":"CSS Rotate Text Example","datePublished":"2015-06-18T09:15:58+00:00","dateModified":"2018-01-08T12:34:16+00:00","mainEntityOfPage":{"@id":"https:\/\/www.webcodegeeks.com\/css\/css-rotate-text-example\/"},"wordCount":510,"commentCount":0,"publisher":{"@id":"https:\/\/www.webcodegeeks.com\/#organization"},"image":{"@id":"https:\/\/www.webcodegeeks.com\/css\/css-rotate-text-example\/#primaryimage"},"thumbnailUrl":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/css3-logo.jpg","articleSection":["CSS"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.webcodegeeks.com\/css\/css-rotate-text-example\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.webcodegeeks.com\/css\/css-rotate-text-example\/","url":"https:\/\/www.webcodegeeks.com\/css\/css-rotate-text-example\/","name":"CSS Rotate Text Example - Web Code Geeks - 2026","isPartOf":{"@id":"https:\/\/www.webcodegeeks.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.webcodegeeks.com\/css\/css-rotate-text-example\/#primaryimage"},"image":{"@id":"https:\/\/www.webcodegeeks.com\/css\/css-rotate-text-example\/#primaryimage"},"thumbnailUrl":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/css3-logo.jpg","datePublished":"2015-06-18T09:15:58+00:00","dateModified":"2018-01-08T12:34:16+00:00","description":"In this example, we'll talk about the rotate value of the transform property of css and specifically about rotating text elements in html. Because the","breadcrumb":{"@id":"https:\/\/www.webcodegeeks.com\/css\/css-rotate-text-example\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.webcodegeeks.com\/css\/css-rotate-text-example\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.webcodegeeks.com\/css\/css-rotate-text-example\/#primaryimage","url":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/css3-logo.jpg","contentUrl":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/css3-logo.jpg","width":150,"height":150},{"@type":"BreadcrumbList","@id":"https:\/\/www.webcodegeeks.com\/css\/css-rotate-text-example\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.webcodegeeks.com\/"},{"@type":"ListItem","position":2,"name":"CSS","item":"https:\/\/www.webcodegeeks.com\/category\/css\/"},{"@type":"ListItem","position":3,"name":"CSS Rotate Text Example"}]},{"@type":"WebSite","@id":"https:\/\/www.webcodegeeks.com\/#website","url":"https:\/\/www.webcodegeeks.com\/","name":"Web Code Geeks","description":"Web Developers Resource Center","publisher":{"@id":"https:\/\/www.webcodegeeks.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.webcodegeeks.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.webcodegeeks.com\/#organization","name":"Exelixis Media P.C.","url":"https:\/\/www.webcodegeeks.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/logo\/image\/","url":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2022\/06\/exelixis-logo.png","contentUrl":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2022\/06\/exelixis-logo.png","width":864,"height":246,"caption":"Exelixis Media P.C."},"image":{"@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/webcodegeeks","https:\/\/x.com\/webcodegeeks"]},{"@type":"Person","@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/1dfb88b4a8d08c37a6080311fd330a22","name":"Fabio Cimo","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/b3df055f2e1b62e238889fafbb16121c68aab1adcd11af670e185cafae201b3b?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/b3df055f2e1b62e238889fafbb16121c68aab1adcd11af670e185cafae201b3b?s=96&d=mm&r=g","caption":"Fabio Cimo"},"description":"Fabio is a passionate student in web tehnologies including front-end (HTML\/CSS) and web design. He likes exploring as much as possible about the world wide web and how it can be more productive for us all. Currently he studies Computer Engineering, at the same time he works as a freelancer on both web programming and graphic design.","sameAs":["https:\/\/www.facebook.com\/fabiocimo","https:\/\/al.linkedin.com\/in\/fabiocimo","https:\/\/x.com\/fabiocimo","https:\/\/www.youtube.com\/fabiocimo1"],"url":"https:\/\/www.webcodegeeks.com\/author\/fabio-cimo\/"}]}},"_links":{"self":[{"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/posts\/4976","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/users\/75"}],"replies":[{"embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/comments?post=4976"}],"version-history":[{"count":0,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/posts\/4976\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/media\/917"}],"wp:attachment":[{"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/media?parent=4976"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/categories?post=4976"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/tags?post=4976"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}