{"id":4867,"date":"2015-06-11T12:15:26","date_gmt":"2015-06-11T09:15:26","guid":{"rendered":"http:\/\/www.webcodegeeks.com\/?p=4867"},"modified":"2018-01-08T14:36:15","modified_gmt":"2018-01-08T12:36:15","slug":"css-rotate-image-example","status":"publish","type":"post","link":"https:\/\/www.webcodegeeks.com\/css\/css-rotate-image-example\/","title":{"rendered":"CSS Rotate Image Example"},"content":{"rendered":"

In this example, we will consider image rotation using css.<\/p>\n

CSS offers a specific property called transform<\/code> to do this.<\/p>\n

This property can take a lot of attributes, but we will only consider rotation.<\/p>\n

Image rotation will be needed on certain occasions when you want to create your personalized view of image positioning and have a fancier look.<\/p>\n

All browsers support the transform property, with their own prefixes:
\n-ms-transform<\/code> for IE, -webkit-transform<\/code> for Chrome, Opera, Safari etc.<\/p>\n

Lets first look at the basics and then something more on it.
\n 
\n[ulp id=’nAkUl5IbAjqlXSla’]<\/p>\n

1. Basic Setup & Application <\/h2>\n

First, go ahead and create a blank html document and then add the basic syntax inside like so:<\/p>\n

\r\n<!DOCTYPE html>\r\n<html>\r\n<head>\r\n\t<title>CSS3 Image Rotate Example<\/title>\r\n<\/head>\r\n<body>\r\n<!-- STYLE  SECTION -->\r\n<style type=\"text\/css\">\r\n\r\n<\/style>\r\n\r\n<!-- HTML SECTION  -->\r\n\r\n<\/body>\r\n<\/html>\r\n<\/pre>\r\n<\/pre>\n
Now add an img<\/code> tag in the html section with an image inside like this:<\/p>\n
\r\n<!-- HTML SECTION  -->\r\n\t\r\n<img src=\"image.jpg\">\r\n<\/pre>\n
To apply rotation, follow this syntax: transform: rotate(10deg);<\/code> where:<\/p>\n
1. transform<\/strong> is the attribute given to the img<\/p>\n
2. rotate<\/strong> is the value of the attribute<\/p>\n
3. (10deg)<\/strong> specifies at what scale should the value be applied.<\/p>\n
With this said, the basic image rotation application would be:<\/p>\n
\r\n<!-- STYLE  SECTION -->\r\n\r\n<style type=\"text\/css\">\r\n\r\nimg {      transform: rotate(10deg);        }\r\n\r\n<\/style>\r\n<\/pre>\n
Now you should see a rotated image on the browser, by 10 degrees:
\n
\"Basic<\/a>
Basic Image Rotation Application<\/figcaption><\/figure><\/p>\n
2. Cases and Examples <\/h2>\n
In this section, we will go through some cases where you can use and how the image rotation.<\/p>\n
In the html area, I will add 5 images so that we can create a collage like view of the images.<\/p>\n
\r\n<!-- HTML SECTION  -->\r\n\r\n<img class=\"img1\" src=\"image.jpg\">\r\n<img class=\"img2\" src=\"image1.jpg\">\r\n<img class=\"img3\" src=\"image2.jpg\">\r\n<img class=\"img4\" src=\"image3.jpg\">\r\n<img class=\"img5\" src=\"image4.jpg\">\r\n<\/pre>\n
Lets wrap images inside a border and a shadow and give odd numbers a -10deg rotation and even numbers 10deg:<\/p>\n
1. box-shadow<\/code> – each image is going to have a light gray shadow surrounding it.<\/p>\n
2. border<\/code> – borders are going to be placed around images in a gray color.<\/p>\n
3. transform: rotate<\/code> – first image will have a -10deg rotation, second a 10deg rotation and so on.<\/p>\n
Coding the css part would be easy:<\/p>\n
\r\n<!-- STYLE  SECTION -->\r\n\r\n<style type=\"text\/css\">\r\n\r\n.img1 {\r\n\ttransform: rotate(-10deg);\r\n\tborder: 0.8em solid #f4f4f4;\r\n\tbox-shadow: 0.5em 0.5em 1em #ccc;\r\n}\r\n\r\n\r\n.img2 {\r\n\ttransform: rotate(10deg);\r\n\tborder: 0.8em solid #f4f4f4;\r\n\tbox-shadow: 0.5em 0.5em 1em #ccc;\r\n}\r\n\r\n.img3 {\r\n\ttransform: rotate(-10deg);\r\n\tborder: 0.8em solid #f4f4f4;\r\n\tbox-shadow: 0.5em 0.5em 1em #ccc;\r\n}\r\n\r\n.img4 {\r\n\ttransform: rotate(10deg);\r\n\tborder: 0.8em solid #f4f4f4;\r\n\tbox-shadow: 0.5em 0.5em 1em #ccc;\r\n}\r\n\r\n.img5 {\r\n\ttransform: rotate(-10deg);\r\n\tborder: 0.8em solid #f4f4f4;\r\n\tbox-shadow: 0.5em 0.5em 1em #ccc;\r\n}\r\n\r\n<\/style>\r\n<\/pre>\n
The view of this nice photo collage in the browser would be:
\n
\"Photo<\/a>
Photo Collage created using CSS Rotation<\/figcaption><\/figure><\/p>\n
You choose positive values to rotate the images in the clockwise direction, and minus values to rotate counterclockwise.<\/p>\n
Another example of the usage of image rotation would be a vertical gallery with inline descriptions. In this case, images are wrapped inside divs to display them in block view. Look at the html below:<\/p>\n
\r\n<!-- HTML SECTION  -->\r\n\r\n<div><img class=\"img1\" src=\"image.jpg\"><\/div>\r\n<div><img class=\"img2\" src=\"image1.jpg\"><\/div>\r\n<div><img class=\"img3\" src=\"image2.jpg\"><\/div>\r\n<div><img class=\"img4\" src=\"image3.jpg\"><\/div>\r\n<div><img class=\"img5\" src=\"image4.jpg\"><\/div>\r\n<\/pre>\n
Now the CSS will have very slight changes (in this case, only the degree has changed and some size elements):<\/p>\n
\r\n<!-- STYLE  SECTION -->\r\n\r\n<style type=\"text\/css\">\r\n\r\nbody {\r\n\tfont-family: \"Montserrat\";\r\n}\r\n\r\n.img1 {\r\n\ttransform: rotate(7deg);\r\n\tborder: 0.5em solid #f4f4f4;\r\n\tbox-shadow: 0.5em 0.5em 0.5em #ccc;\r\n}\r\n\r\n\r\n.img2 {\r\n\ttransform: rotate(-8deg);\r\n\tborder: 0.5em solid #f4f4f4;\r\n\tbox-shadow: 0.5em 0.5em 0.5em #ccc;\r\n}\r\n\r\n.img3 {\r\n\ttransform: rotate(7deg);\r\n\tborder: 0.5em solid #f4f4f4;\r\n\tbox-shadow: 0.5em 0.5em 0.5em #ccc;\r\n}\r\n\r\n.img4 {\r\n\ttransform: rotate(-8deg);\r\n\tborder: 0.5em solid #f4f4f4;\r\n\tbox-shadow: 0.5em 0.5em 0.5em #ccc;\r\n}\r\n\r\n.img5 {\r\n\ttransform: rotate(7deg);\r\n\tborder: 0.5em solid #f4f4f4;\r\n\tbox-shadow: 0.5em 0.5em 0.5em #ccc;\r\n}\r\n\r\n<\/style>\r\n<\/pre>\n
So you can have a vertical view of these rotated images and place your description inline:
\n
\"A<\/a>
A Vertical Photo Gallery with Inline Description<\/figcaption><\/figure><\/p>\n
Well, that is a clue of what you can do using the image rotation in css.<\/p>\n
3. Conclusion <\/h2>\n
It seems like a small part of css, and it is somehow, but the transform property with rotate(xdeg) value applied can fundamentally change the way you think of images inside a webpage and rethink ways you can organise them.<\/p>\n
It is very easy to use and create beautiful gallery-like sets of images placed on various degrees.<\/p>\n
A 180 deg rotation would mean an upside down view while a 360 deg would mean no changes in the view, a full rotation.<\/p>\n
4. Download <\/h2>\n
Download<\/strong>
\nYou can download the full source code of this example here: CSS3 Image Rotate<\/strong><\/a><\/div>\n","protected":false},"excerpt":{"rendered":"
In this example, we will consider image rotation using css. CSS offers a specific property called transform to do this. This property can take a lot of attributes, but we will only consider rotation. Image rotation will be needed on certain occasions when you want to create your personalized view of image positioning and have …<\/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-4867","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-css"],"yoast_head":"\nCSS Rotate Image Example - Web Code Geeks - 2026<\/title>\n<meta name=\"description\" content=\"In this example, we will consider image rotation using css. CSS offers a specific property called transform to do this. This property can take a lot of\" \/>\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-image-example\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"CSS Rotate Image Example - Web Code Geeks - 2026\" \/>\n<meta property=\"og:description\" content=\"In this example, we will consider image rotation using css. CSS offers a specific property called transform to do this. This property can take a lot of\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.webcodegeeks.com\/css\/css-rotate-image-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-11T09:15:26+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2018-01-08T12:36:15+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=\"5 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-image-example\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/css\/css-rotate-image-example\/\"},\"author\":{\"name\":\"Fabio Cimo\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/1dfb88b4a8d08c37a6080311fd330a22\"},\"headline\":\"CSS Rotate Image Example\",\"datePublished\":\"2015-06-11T09:15:26+00:00\",\"dateModified\":\"2018-01-08T12:36:15+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/css\/css-rotate-image-example\/\"},\"wordCount\":547,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/#organization\"},\"image\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/css\/css-rotate-image-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-image-example\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.webcodegeeks.com\/css\/css-rotate-image-example\/\",\"url\":\"https:\/\/www.webcodegeeks.com\/css\/css-rotate-image-example\/\",\"name\":\"CSS Rotate Image Example - Web Code Geeks - 2026\",\"isPartOf\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/css\/css-rotate-image-example\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/css\/css-rotate-image-example\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/css3-logo.jpg\",\"datePublished\":\"2015-06-11T09:15:26+00:00\",\"dateModified\":\"2018-01-08T12:36:15+00:00\",\"description\":\"In this example, we will consider image rotation using css. CSS offers a specific property called transform to do this. This property can take a lot of\",\"breadcrumb\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/css\/css-rotate-image-example\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.webcodegeeks.com\/css\/css-rotate-image-example\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.webcodegeeks.com\/css\/css-rotate-image-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-image-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 Image 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 Image Example - Web Code Geeks - 2026","description":"In this example, we will consider image rotation using css. CSS offers a specific property called transform to do this. This property can take a lot of","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-image-example\/","og_locale":"en_US","og_type":"article","og_title":"CSS Rotate Image Example - Web Code Geeks - 2026","og_description":"In this example, we will consider image rotation using css. CSS offers a specific property called transform to do this. This property can take a lot of","og_url":"https:\/\/www.webcodegeeks.com\/css\/css-rotate-image-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-11T09:15:26+00:00","article_modified_time":"2018-01-08T12:36:15+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":"5 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.webcodegeeks.com\/css\/css-rotate-image-example\/#article","isPartOf":{"@id":"https:\/\/www.webcodegeeks.com\/css\/css-rotate-image-example\/"},"author":{"name":"Fabio Cimo","@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/1dfb88b4a8d08c37a6080311fd330a22"},"headline":"CSS Rotate Image Example","datePublished":"2015-06-11T09:15:26+00:00","dateModified":"2018-01-08T12:36:15+00:00","mainEntityOfPage":{"@id":"https:\/\/www.webcodegeeks.com\/css\/css-rotate-image-example\/"},"wordCount":547,"commentCount":0,"publisher":{"@id":"https:\/\/www.webcodegeeks.com\/#organization"},"image":{"@id":"https:\/\/www.webcodegeeks.com\/css\/css-rotate-image-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-image-example\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.webcodegeeks.com\/css\/css-rotate-image-example\/","url":"https:\/\/www.webcodegeeks.com\/css\/css-rotate-image-example\/","name":"CSS Rotate Image Example - Web Code Geeks - 2026","isPartOf":{"@id":"https:\/\/www.webcodegeeks.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.webcodegeeks.com\/css\/css-rotate-image-example\/#primaryimage"},"image":{"@id":"https:\/\/www.webcodegeeks.com\/css\/css-rotate-image-example\/#primaryimage"},"thumbnailUrl":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/css3-logo.jpg","datePublished":"2015-06-11T09:15:26+00:00","dateModified":"2018-01-08T12:36:15+00:00","description":"In this example, we will consider image rotation using css. CSS offers a specific property called transform to do this. This property can take a lot of","breadcrumb":{"@id":"https:\/\/www.webcodegeeks.com\/css\/css-rotate-image-example\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.webcodegeeks.com\/css\/css-rotate-image-example\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.webcodegeeks.com\/css\/css-rotate-image-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-image-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 Image 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\/4867","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=4867"}],"version-history":[{"count":0,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/posts\/4867\/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=4867"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/categories?post=4867"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/tags?post=4867"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}