{"id":4220,"date":"2019-04-11T18:12:19","date_gmt":"2019-04-11T12:42:19","guid":{"rendered":"https:\/\/blog.pheonixsolutions.com\/?p=4220"},"modified":"2019-04-25T14:38:57","modified_gmt":"2019-04-25T09:08:57","slug":"how-to-use-transform-property-in-css","status":"publish","type":"post","link":"https:\/\/pheonixsolutions.com\/blog\/how-to-use-transform-property-in-css\/","title":{"rendered":"HOW TO USE TRANSFORM PROPERTY IN CSS"},"content":{"rendered":"\n<h4 class=\"wp-block-heading\">HOW TO USE TRANSFORM PROPERTY IN CSS<\/h4>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"mce_0\"><strong>Date posted :11\/04\/2019<\/strong><\/h4>\n\n\n\n<p>In this tutorial we are going to see about how to use transform properties in <strong>CSS.<\/strong><\/p>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>TRANSFORM ROTATION<\/strong><\/h4>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;!DOCTYPE html&gt;\n&lt;html&gt;\n&lt;head&gt;\n&lt;style&gt; \ndiv.first {\n  width: 150px;\n  height: 80px;\n  background-color: Green;\n  -ms-transform: rotate(20deg); \n  -webkit-transform: rotate(100deg); \n  transform: rotate(20deg);\n}\n\ndiv.second {\n  width: 150px;\n  height: 80px;\n  background-color: yellow;\n  -ms-transform: skewY(20deg); \n  -webkit-transform: skewY(20deg); \n  transform: skewY(20deg);\n}\n\ndiv.theird {\n  width: 150px;\n  height: 80px;\n  background-color: black;\n  -ms-transform: scaleY(1.5); \n  -webkit-transform: scaleY(1.5); \n  transform: scaleY(1.5);\n}\n&lt;\/style&gt;\n&lt;\/head&gt;\n&lt;body&gt;\n\n&lt;h1&gt;How to use transform rotate property&lt;\/h1&gt;\n\n&lt;h2&gt;Rotate property&lt;\/h2&gt;\n<div class=\"first\">Welcome<\/div>\n&lt;br&gt;\n\n&lt;h2&gt;Skewy propertye&lt;\/h2&gt;\n<div class=\"second\">Welcome<\/div>\n&lt;br&gt;\n\n&lt;h2&gt;scaleY property&lt;\/h2&gt;\n<div class=\"theird\">Welcome<\/div>\n\n&lt;\/body&gt;\n&lt;\/html&gt;<\/pre>\n\n\n\n<h4 class=\"wp-block-heading\"> <br><br><\/h4>\n\n\n\n<ul class=\"wp-block-list\"><li>The rotation created by rotate(). <\/li><li> If  the values is positive, the movement will be clockwise . If negative, it will be counter-clockwise. <\/li><li>The background color move based on our degree with in rotate.<\/li><li><\/li><\/ul>\n\n\n\n<ul class=\"wp-block-gallery columns-1 is-cropped wp-block-gallery-1 is-layout-flex wp-block-gallery-is-layout-flex\"><li class=\"blocks-gallery-item\"><figure><img loading=\"lazy\" decoding=\"async\" width=\"692\" height=\"582\" src=\"https:\/\/blog.pheonixsolutions.com\/wp-content\/uploads\/2019\/04\/blogrotation.png\" alt=\"\" data-id=\"4221\" data-link=\"https:\/\/blog.pheonixsolutions.com\/?attachment_id=4221\" class=\"wp-image-4221\" srcset=\"https:\/\/pheonixsolutions.com\/blog\/wp-content\/uploads\/2019\/04\/blogrotation.png 692w, https:\/\/pheonixsolutions.com\/blog\/wp-content\/uploads\/2019\/04\/blogrotation-300x252.png 300w\" sizes=\"auto, (max-width: 692px) 100vw, 692px\" \/><\/figure><\/li><\/ul>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>DELAY PROPERTY<\/strong><\/h4>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;!DOCTYPE html&gt;\n&lt;html&gt;\n&lt;head&gt;\n&lt;style&gt; \ndiv {\n  width: 100px;\n  height: 100px;\n  background: red;\n  -webkit-transition-property: width; \n  -webkit-transition-duration: 5s; \n  -webkit-transition-delay: 2s; \n  transition-property: width;\n  transition-duration: 5s;\n  transition-delay: 2s;\n}\n\ndiv:hover {\n  width: 300px;\n}\n&lt;\/style&gt;\n&lt;\/head&gt;\n&lt;body&gt;\n\n&lt;h1&gt;Delay Property&lt;\/h1&gt;\n\n\n<div><\/div>\n\n\n\n&lt;\/body&gt;\n&lt;\/html&gt;\n<\/pre>\n\n\n\n<ul class=\"wp-block-list\"><li>When we hover into the div it will display the background color.<\/li><li>The color display based on our given second.<\/li><li>It will display until our duration second.<\/li><\/ul>\n\n\n\n<ul class=\"wp-block-gallery columns-1 is-cropped wp-block-gallery-2 is-layout-flex wp-block-gallery-is-layout-flex\"><li class=\"blocks-gallery-item\"><figure><img loading=\"lazy\" decoding=\"async\" width=\"322\" height=\"274\" src=\"https:\/\/blog.pheonixsolutions.com\/wp-content\/uploads\/2019\/04\/hk.png\" alt=\"\" data-id=\"4238\" data-link=\"https:\/\/blog.pheonixsolutions.com\/?attachment_id=4238\" class=\"wp-image-4238\" srcset=\"https:\/\/pheonixsolutions.com\/blog\/wp-content\/uploads\/2019\/04\/hk.png 322w, https:\/\/pheonixsolutions.com\/blog\/wp-content\/uploads\/2019\/04\/hk-300x255.png 300w\" sizes=\"auto, (max-width: 322px) 100vw, 322px\" \/><\/figure><\/li><\/ul>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>DURATION PROPERTY<\/strong><\/h4>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;!DOCTYPE html&gt;\n&lt;html&gt;\n&lt;head&gt;\n&lt;style&gt; \ndiv {\n  width: 100px;\n  height: 100px;\n  background: red;\n  -webkit-transition-property: width; \n  -webkit-transition-duration: 5s; \n  transition-property: width;\n  transition-duration: 5s;\n}\n\ndiv:hover {\n  width: 500px;\n}\n&lt;\/style&gt;\n&lt;\/head&gt;\n&lt;body&gt;\n&lt;center&gt;\n&lt;h1&gt;Duration&lt;\/h1&gt;\n\n&lt;\/center&gt;\n<div><\/div>\n\n\n\n&lt;\/body&gt;\n&lt;\/html&gt;<\/pre>\n\n\n\n<ul class=\"wp-block-list\"><li>The transition duration duration property is used to display the background for our required duration.<\/li><li>Here the background color display based on our duration time.<\/li><li>Based on above code it will display five second.<\/li><\/ul>\n\n\n\n<p><\/p>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"390\" height=\"250\" src=\"https:\/\/blog.pheonixsolutions.com\/wp-content\/uploads\/2019\/04\/duration.png\" alt=\"\" class=\"wp-image-4223\" srcset=\"https:\/\/pheonixsolutions.com\/blog\/wp-content\/uploads\/2019\/04\/duration.png 390w, https:\/\/pheonixsolutions.com\/blog\/wp-content\/uploads\/2019\/04\/duration-300x192.png 300w\" sizes=\"auto, (max-width: 390px) 100vw, 390px\" \/><\/figure>\n\n\n\n<p> Thanks for using pheonixsolutions.  <\/p>\n\n\n\n<p>\n\nYou find this tutorial helpful? Share with your friends to keep it alive. \n\n<\/p>\n","protected":false},"excerpt":{"rendered":"<p>HOW TO USE TRANSFORM PROPERTY IN CSS Date posted :11\/04\/2019 In this tutorial we are going to see about how to use transform properties in CSS. TRANSFORM ROTATION The rotation created by rotate(). If the values is positive, the movement will be clockwise . If negative, it will be counter-clockwise.&hellip; <a href=\"https:\/\/pheonixsolutions.com\/blog\/how-to-use-transform-property-in-css\/\" class=\"more-link read-more\" rel=\"bookmark\">Continue Reading <span class=\"screen-reader-text\">HOW TO USE TRANSFORM PROPERTY IN CSS<\/span><i class=\"fa fa-arrow-right\"><\/i><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[484,221,1],"tags":[496,619,618],"class_list":{"0":"post-4220","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"hentry","6":"category-html-css","7":"category-php","8":"category-uncategorized","9":"tag-css","10":"tag-delay","11":"tag-trsnsform","12":"h-entry","14":"h-as-article"},"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.4 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Pheonix Solutions - We Empower Your Business Growth<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/pheonixsolutions.com\/blog\/how-to-use-transform-property-in-css\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Pheonix Solutions - We Empower Your Business Growth\" \/>\n<meta property=\"og:description\" content=\"HOW TO USE TRANSFORM PROPERTY IN CSS Date posted :11\/04\/2019 In this tutorial we are going to see about how to use transform properties in CSS. TRANSFORM ROTATION The rotation created by rotate(). If the values is positive, the movement will be clockwise . If negative, it will be counter-clockwise.&hellip; Continue Reading HOW TO USE TRANSFORM PROPERTY IN CSS\" \/>\n<meta property=\"og:url\" content=\"https:\/\/pheonixsolutions.com\/blog\/how-to-use-transform-property-in-css\/\" \/>\n<meta property=\"og:site_name\" content=\"PHEONIXSOLUTIONS\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/PheonixSolutions-209942982759387\/\" \/>\n<meta property=\"article:published_time\" content=\"2019-04-11T12:42:19+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2019-04-25T09:08:57+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/blog.pheonixsolutions.com\/wp-content\/uploads\/2019\/04\/blogrotation.png\" \/>\n<meta name=\"author\" content=\"admin\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@pheonixsolution\" \/>\n<meta name=\"twitter:site\" content=\"@pheonixsolution\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"admin\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/pheonixsolutions.com\\\/blog\\\/how-to-use-transform-property-in-css\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/pheonixsolutions.com\\\/blog\\\/how-to-use-transform-property-in-css\\\/\"},\"author\":{\"name\":\"admin\",\"@id\":\"https:\\\/\\\/pheonixsolutions.com\\\/blog\\\/#\\\/schema\\\/person\\\/0ffa33d73c869faec2d50e79c24e3503\"},\"headline\":\"HOW TO USE TRANSFORM PROPERTY IN CSS\",\"datePublished\":\"2019-04-11T12:42:19+00:00\",\"dateModified\":\"2019-04-25T09:08:57+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/pheonixsolutions.com\\\/blog\\\/how-to-use-transform-property-in-css\\\/\"},\"wordCount\":148,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\\\/\\\/pheonixsolutions.com\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/pheonixsolutions.com\\\/blog\\\/how-to-use-transform-property-in-css\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/blog.pheonixsolutions.com\\\/wp-content\\\/uploads\\\/2019\\\/04\\\/blogrotation.png\",\"keywords\":[\"CSS\",\"Delay\",\"Trsnsform\"],\"articleSection\":[\"HTML CSS\",\"PHP\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/pheonixsolutions.com\\\/blog\\\/how-to-use-transform-property-in-css\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/pheonixsolutions.com\\\/blog\\\/how-to-use-transform-property-in-css\\\/\",\"url\":\"https:\\\/\\\/pheonixsolutions.com\\\/blog\\\/how-to-use-transform-property-in-css\\\/\",\"name\":\"Pheonix Solutions - We Empower Your Business Growth\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/pheonixsolutions.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/pheonixsolutions.com\\\/blog\\\/how-to-use-transform-property-in-css\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/pheonixsolutions.com\\\/blog\\\/how-to-use-transform-property-in-css\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/blog.pheonixsolutions.com\\\/wp-content\\\/uploads\\\/2019\\\/04\\\/blogrotation.png\",\"datePublished\":\"2019-04-11T12:42:19+00:00\",\"dateModified\":\"2019-04-25T09:08:57+00:00\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/pheonixsolutions.com\\\/blog\\\/how-to-use-transform-property-in-css\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/pheonixsolutions.com\\\/blog\\\/how-to-use-transform-property-in-css\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/pheonixsolutions.com\\\/blog\\\/how-to-use-transform-property-in-css\\\/#primaryimage\",\"url\":\"https:\\\/\\\/blog.pheonixsolutions.com\\\/wp-content\\\/uploads\\\/2019\\\/04\\\/blogrotation.png\",\"contentUrl\":\"https:\\\/\\\/blog.pheonixsolutions.com\\\/wp-content\\\/uploads\\\/2019\\\/04\\\/blogrotation.png\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/pheonixsolutions.com\\\/blog\\\/how-to-use-transform-property-in-css\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/pheonixsolutions.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"HOW TO USE TRANSFORM PROPERTY IN CSS\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/pheonixsolutions.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/pheonixsolutions.com\\\/blog\\\/\",\"name\":\"Pheonix Solutions\",\"description\":\"We Empower Your Business Growth\",\"publisher\":{\"@id\":\"https:\\\/\\\/pheonixsolutions.com\\\/blog\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/pheonixsolutions.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/pheonixsolutions.com\\\/blog\\\/#organization\",\"name\":\"PheonixSolutions\",\"url\":\"https:\\\/\\\/pheonixsolutions.com\\\/blog\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/pheonixsolutions.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/pheonixsolutions.com\\\/blog\\\/wp-content\\\/uploads\\\/2016\\\/12\\\/logo.png\",\"contentUrl\":\"https:\\\/\\\/pheonixsolutions.com\\\/blog\\\/wp-content\\\/uploads\\\/2016\\\/12\\\/logo.png\",\"width\":454,\"height\":300,\"caption\":\"PheonixSolutions\"},\"image\":{\"@id\":\"https:\\\/\\\/pheonixsolutions.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/PheonixSolutions-209942982759387\\\/\",\"https:\\\/\\\/x.com\\\/pheonixsolution\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/pheonixsolutions.com\\\/blog\\\/#\\\/schema\\\/person\\\/0ffa33d73c869faec2d50e79c24e3503\",\"name\":\"admin\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/09bacc0294abee1322a23ab4bc6a0330dd4cb4df707dc9d0b0efeba6c109608b?s=96&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/09bacc0294abee1322a23ab4bc6a0330dd4cb4df707dc9d0b0efeba6c109608b?s=96&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/09bacc0294abee1322a23ab4bc6a0330dd4cb4df707dc9d0b0efeba6c109608b?s=96&r=g\",\"caption\":\"admin\"},\"sameAs\":[\"http:\\\/\\\/blog.pheonixsolutions.com\"],\"url\":\"https:\\\/\\\/pheonixsolutions.com\\\/blog\\\/author\\\/admin\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Pheonix Solutions - We Empower Your Business Growth","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:\/\/pheonixsolutions.com\/blog\/how-to-use-transform-property-in-css\/","og_locale":"en_US","og_type":"article","og_title":"Pheonix Solutions - We Empower Your Business Growth","og_description":"HOW TO USE TRANSFORM PROPERTY IN CSS Date posted :11\/04\/2019 In this tutorial we are going to see about how to use transform properties in CSS. TRANSFORM ROTATION The rotation created by rotate(). If the values is positive, the movement will be clockwise . If negative, it will be counter-clockwise.&hellip; Continue Reading HOW TO USE TRANSFORM PROPERTY IN CSS","og_url":"https:\/\/pheonixsolutions.com\/blog\/how-to-use-transform-property-in-css\/","og_site_name":"PHEONIXSOLUTIONS","article_publisher":"https:\/\/www.facebook.com\/PheonixSolutions-209942982759387\/","article_published_time":"2019-04-11T12:42:19+00:00","article_modified_time":"2019-04-25T09:08:57+00:00","og_image":[{"url":"https:\/\/blog.pheonixsolutions.com\/wp-content\/uploads\/2019\/04\/blogrotation.png","type":"","width":"","height":""}],"author":"admin","twitter_card":"summary_large_image","twitter_creator":"@pheonixsolution","twitter_site":"@pheonixsolution","twitter_misc":{"Written by":"admin","Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/pheonixsolutions.com\/blog\/how-to-use-transform-property-in-css\/#article","isPartOf":{"@id":"https:\/\/pheonixsolutions.com\/blog\/how-to-use-transform-property-in-css\/"},"author":{"name":"admin","@id":"https:\/\/pheonixsolutions.com\/blog\/#\/schema\/person\/0ffa33d73c869faec2d50e79c24e3503"},"headline":"HOW TO USE TRANSFORM PROPERTY IN CSS","datePublished":"2019-04-11T12:42:19+00:00","dateModified":"2019-04-25T09:08:57+00:00","mainEntityOfPage":{"@id":"https:\/\/pheonixsolutions.com\/blog\/how-to-use-transform-property-in-css\/"},"wordCount":148,"commentCount":0,"publisher":{"@id":"https:\/\/pheonixsolutions.com\/blog\/#organization"},"image":{"@id":"https:\/\/pheonixsolutions.com\/blog\/how-to-use-transform-property-in-css\/#primaryimage"},"thumbnailUrl":"https:\/\/blog.pheonixsolutions.com\/wp-content\/uploads\/2019\/04\/blogrotation.png","keywords":["CSS","Delay","Trsnsform"],"articleSection":["HTML CSS","PHP"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/pheonixsolutions.com\/blog\/how-to-use-transform-property-in-css\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/pheonixsolutions.com\/blog\/how-to-use-transform-property-in-css\/","url":"https:\/\/pheonixsolutions.com\/blog\/how-to-use-transform-property-in-css\/","name":"Pheonix Solutions - We Empower Your Business Growth","isPartOf":{"@id":"https:\/\/pheonixsolutions.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/pheonixsolutions.com\/blog\/how-to-use-transform-property-in-css\/#primaryimage"},"image":{"@id":"https:\/\/pheonixsolutions.com\/blog\/how-to-use-transform-property-in-css\/#primaryimage"},"thumbnailUrl":"https:\/\/blog.pheonixsolutions.com\/wp-content\/uploads\/2019\/04\/blogrotation.png","datePublished":"2019-04-11T12:42:19+00:00","dateModified":"2019-04-25T09:08:57+00:00","breadcrumb":{"@id":"https:\/\/pheonixsolutions.com\/blog\/how-to-use-transform-property-in-css\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/pheonixsolutions.com\/blog\/how-to-use-transform-property-in-css\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/pheonixsolutions.com\/blog\/how-to-use-transform-property-in-css\/#primaryimage","url":"https:\/\/blog.pheonixsolutions.com\/wp-content\/uploads\/2019\/04\/blogrotation.png","contentUrl":"https:\/\/blog.pheonixsolutions.com\/wp-content\/uploads\/2019\/04\/blogrotation.png"},{"@type":"BreadcrumbList","@id":"https:\/\/pheonixsolutions.com\/blog\/how-to-use-transform-property-in-css\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/pheonixsolutions.com\/blog\/"},{"@type":"ListItem","position":2,"name":"HOW TO USE TRANSFORM PROPERTY IN CSS"}]},{"@type":"WebSite","@id":"https:\/\/pheonixsolutions.com\/blog\/#website","url":"https:\/\/pheonixsolutions.com\/blog\/","name":"Pheonix Solutions","description":"We Empower Your Business Growth","publisher":{"@id":"https:\/\/pheonixsolutions.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/pheonixsolutions.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/pheonixsolutions.com\/blog\/#organization","name":"PheonixSolutions","url":"https:\/\/pheonixsolutions.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/pheonixsolutions.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/pheonixsolutions.com\/blog\/wp-content\/uploads\/2016\/12\/logo.png","contentUrl":"https:\/\/pheonixsolutions.com\/blog\/wp-content\/uploads\/2016\/12\/logo.png","width":454,"height":300,"caption":"PheonixSolutions"},"image":{"@id":"https:\/\/pheonixsolutions.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/PheonixSolutions-209942982759387\/","https:\/\/x.com\/pheonixsolution"]},{"@type":"Person","@id":"https:\/\/pheonixsolutions.com\/blog\/#\/schema\/person\/0ffa33d73c869faec2d50e79c24e3503","name":"admin","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/09bacc0294abee1322a23ab4bc6a0330dd4cb4df707dc9d0b0efeba6c109608b?s=96&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/09bacc0294abee1322a23ab4bc6a0330dd4cb4df707dc9d0b0efeba6c109608b?s=96&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/09bacc0294abee1322a23ab4bc6a0330dd4cb4df707dc9d0b0efeba6c109608b?s=96&r=g","caption":"admin"},"sameAs":["http:\/\/blog.pheonixsolutions.com"],"url":"https:\/\/pheonixsolutions.com\/blog\/author\/admin\/"}]}},"jetpack_featured_media_url":"","jetpack_shortlink":"https:\/\/wp.me\/p7F4uM-164","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/pheonixsolutions.com\/blog\/wp-json\/wp\/v2\/posts\/4220","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/pheonixsolutions.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/pheonixsolutions.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/pheonixsolutions.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/pheonixsolutions.com\/blog\/wp-json\/wp\/v2\/comments?post=4220"}],"version-history":[{"count":0,"href":"https:\/\/pheonixsolutions.com\/blog\/wp-json\/wp\/v2\/posts\/4220\/revisions"}],"wp:attachment":[{"href":"https:\/\/pheonixsolutions.com\/blog\/wp-json\/wp\/v2\/media?parent=4220"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/pheonixsolutions.com\/blog\/wp-json\/wp\/v2\/categories?post=4220"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/pheonixsolutions.com\/blog\/wp-json\/wp\/v2\/tags?post=4220"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}