تغییر شکل تصویر با css

ویژگی transform در css همانطور که از نامش پیداست برای تغییر شکل یک عنصر کاربرد دارد.

این ویژگی امکان چرخش ، تغییر مقیاس ، حرک ، مایل و کج کردن و... را در یک عنصر برای شما ایجاد می کند.

زیر مجموعه های transform عبارتند از :

inherit : عنصر مورد نظر خاصیت والدین خود را به ارث می برد

initial : مقدار پیش فرض عنصر را برای آن تظیم می کند

rotate : امکان چرخش عنصر را ایجاد می کند

skew : مایل و کج کردن عنصر

scale : تغییر درجه در زوایای عنصر

translate : کوچک و بزرگ کردن عنصر

مثال :

تغییر شکل در یک تصویر

HTML

<"div id="img1>

</ "img src="../images/01.jpg"  class="p>

<div/>

 

css

#img1 {
    

width:150px;
   height: 150px;
   border:1px solid;

/*چرخش به میزان 15 درجه به چب*/
 -webkit-transform: rotate(-15deg);
 -moz-transform: rotate(-15deg);
 -o-transform: rotate(-15deg);

transform: rotate(-15deg);
      
margin-top:-10px;
 margin-left:-90px;

 float:left;

background:#B3A9A6;

padding:5px;
 border-radius:3px;

}

#img1 : hover {

/*  چرخش 360 درجه تصویر*/
 -webkit-transform: rotate(360deg);
 -moz-transform: rotate(360deg);
 -o-transform: rotate(360deg);
 transform: rotate(360deg);

   /*بزرگتر شدن تصویر*/
-webkit-transform: scale(1.2);
-moz-transform: scale(1.2);
-o-transform: scale(1.2);
transform: scale(1.2);


 /*سرعت چرخش 360 درجه*/
 -moz-transition:200ms ease-in;
 -ms-transition:200ms ease-in;
 -webkit-transition:200ms ease-in;
 -o-transition:200ms ease-in;
 transition:200ms ease-in;

}


تمام حقوق مادی و معنوی این ساین متعلق به mojtaba khodadadi میباشد
  
2016 - 2022