تغییر شکل دوبعدی در CSS3

کد های اختصاصی و غیر اختصاصی تغییر حالت المنت ها در CSS3

rotate

با این ویژگی میتونید هر المنتی رو تا ۳۶۰ درجه (و حتی بیشتر!)  بچرخونید.
در مرورگرهای مبتنی بر وبکیت و گکو (گوگل کرومفایرفاکسسافاری ) پشتیبانی میشه.

-webkit-transform: rotate(15deg);
-moz-transform: rotate(15deg);
transform: rotate(15deg);

See the Pen CSS Rotate by Pouya Saadeghi (@saadeghi) on CodePen

scale

به راحتی مقیاس طول و عرض اجزای صفحه رو تغییر بدید:

-webkit-transform: scale(1.1, 1.5);
-moz-transform: scale(1.1, 1.5);
transform: scale(1.1, 1.5);

See the Pen CSS Scale by Pouya Saadeghi (@saadeghi) on CodePen

skew

برای تغییر زاویه های المنت ها:

-webkit-transform:skew(-200deg);
-moz-transform:skew(-200deg);
transform:skew(-200deg);

See the Pen CSS Skew by Pouya Saadeghi (@saadeghi) on CodePen

translate

جابجایی عناصر:

-webkit-transform: translate(-50px,30px);
-moz-transform: translate(-50px,30px);
transform: translate(-50px,30px);

See the Pen CSS Translate by Pouya Saadeghi (@saadeghi) on CodePen

از این خاصیت ها میتونید همزمان استفاده کنید.مثل:

-webkit-transform: rotate(15deg) scale(1.25, 0.5);
-moz-transform: rotate(15deg) scale(1.25, 0.5);
transform: rotate(15deg) scale(1.25, 0.5);

خب! حالا کد های transform رو میتونیم برای حرکت موس تنظیم کنیم و در اینجا به یکی از رویداد hover استفاده می‌کنیم.

.div1:hover{background-color:#0000FF;}

به این کد توجه کنید:

div{
  background:#0FF;
  width:70px;
  height:70px;
}
div:hover{
  background-color:#F60;
  -webkit-transform:scale(2);
  -moz-transform:scale(2);
  transform:scale(2);
}

در کد بالا div که طول و عرض ۷۰ پیکسلی و بکگراند آبی داره، با حرکت موس  بکگراندش نارنجی میشه و سایزش هم دوبرابر میشه.

از transitionها هم می تونید برای ایجاد حالت انیمیشن در هنگام hover استفاده کنید:

div{
  background:#0FF;
  width:70px;
  height:70px;
  margin:65px auto;
  -webkit-transition:all 1.5s ease;
  -moz-transition:all 1.5s ease;
  transition:all 1.5s ease;
}
div:hover{
  background:#F60;
  -webkit-transform:rotate(60deg) scale(2);
  -moz-transform:rotate(60deg) scale(2);
  transform:rotate(60deg) scale(2);
}

در کد بالا div1 که طول و عرض ۷۰ پیکسلی و بکگراند آبی داره، با حرکت موس ، در زمان ۱٫۵ ثانیه، ۶۰ درجه میچرخه و بکگراندش نارنجی میشه و سایزش هم دوبرابر میشه.

See the Pen CSS Transform & transition by Pouya Saadeghi (@saadeghi) on CodePen

نوشته شده توسط پویا صادقی

بیشتر بخونید:

شبه عنصرها در CSSسلکتورهای CSS3
پاسارگاد گرافیک در گوگل پلاس
پاسارگاد گرافیک را دنبال کنید!