{"id":4220,"date":"2019-04-11T18:12:19","date_gmt":"2019-04-11T12:42:19","guid":{"rendered":"https:\/\/pheonixsolutions.com\/blog\/?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

HOW TO USE TRANSFORM PROPERTY IN CSS<\/h4>\n\n\n\n

Date posted :11\/04\/2019<\/strong><\/h4>\n\n\n\n

In this tutorial we are going to see about how to use transform properties in CSS.<\/strong><\/p>\n\n\n\n

TRANSFORM ROTATION<\/strong><\/h4>\n\n\n\n
<!DOCTYPE html>\n<html>\n<head>\n<style> \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<\/style>\n<\/head>\n<body>\n\n<h1>How to use transform rotate property<\/h1>\n\n<h2>Rotate property<\/h2>\n
Welcome<\/div>\n<br>\n\n<h2>Skewy propertye<\/h2>\n
Welcome<\/div>\n<br>\n\n<h2>scaleY property<\/h2>\n
Welcome<\/div>\n\n<\/body>\n<\/html><\/pre>\n\n\n\n
 

<\/h4>\n\n\n\n
  • The rotation created by rotate(). <\/li>
  •  If  the values is positive, the movement will be clockwise . If negative, it will be counter-clockwise. <\/li>
  • The background color move based on our degree with in rotate.<\/li>
  • <\/li><\/ul>\n\n\n\n
    • \"\"<\/figure><\/li><\/ul>\n\n\n\n
      DELAY PROPERTY<\/strong><\/h4>\n\n\n\n
      <!DOCTYPE html>\n<html>\n<head>\n<style> \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<\/style>\n<\/head>\n<body>\n\n<h1>Delay Property<\/h1>\n\n\n
      <\/div>\n\n\n\n<\/body>\n<\/html>\n<\/pre>\n\n\n\n
      • When we hover into the div it will display the background color.<\/li>
      • The color display based on our given second.<\/li>
      • It will display until our duration second.<\/li><\/ul>\n\n\n\n
        • \"\"<\/figure><\/li><\/ul>\n\n\n\n
          DURATION PROPERTY<\/strong><\/h4>\n\n\n\n
          <!DOCTYPE html>\n<html>\n<head>\n<style> \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<\/style>\n<\/head>\n<body>\n<center>\n<h1>Duration<\/h1>\n\n<\/center>\n
          <\/div>\n\n\n\n<\/body>\n<\/html><\/pre>\n\n\n\n
          • The transition duration duration property is used to display the background for our required duration.<\/li>
          • Here the background color display based on our duration time.<\/li>
          • Based on above code it will display five second.<\/li><\/ul>\n\n\n\n
            <\/p>\n\n\n\n
            \"\"<\/figure>\n\n\n\n
             Thanks for using pheonixsolutions.  <\/p>\n\n\n\n
            \n\nYou find this tutorial helpful? Share with your friends to keep it alive. \n\n<\/p>\n","protected":false},"excerpt":{"rendered":"
            HOW TO USE TRANSFORM PROPERTY IN CSS Date posted :11\/04\/2019 In this tutorial we are going to see about how […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"_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":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":false,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2},"jetpack_post_was_ever_published":false},"categories":[1022],"tags":[496,619,618],"class_list":["post-4220","post","type-post","status-publish","format-standard","hentry","category-web-architecture","tag-css","tag-delay","tag-trsnsform","psol-cat-web-architecture"],"jetpack_publicize_connections":[],"jetpack_shortlink":"https:\/\/wp.me\/phn2x7-164","jetpack_sharing_enabled":true,"jetpack_featured_media_url":"","_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}]}}