شرح خاصية Transform Skew في برمجة Css3

المستعمر للمعلوميات •
0

 

Transform Skew هي خاصية تقوم بإمالة عنصر HTML محدد او بعبارة اخرى هذه الخاصية تقوم بالتحويل الذي يؤدي إلى انحراف العنصر محدد وهذا الأمر يحدث وفقا لدرجة معينة ب Deg وحسب المحور X الأفقي او حسب المحور Y العمودي.

المثال الأول Skew(X,Y)


<div id="EX1" class="skeww">transform: skew(20deg)</div>
<div id="EX2" class="skeww" >transform: skew(-20deg)</div>
<div id="EX3" class="skeww" >transform: skew(0,20deg)</div>
<div id="EX4" class="skeww" >transform: skew(0,-20deg)</div>
<div id="EX5" class="skeww" >transform: skew(20deg,20deg)</div>
.skeww{background-color: #006000;width: 300px;height: 150px;left: calc(50% - 150px);position: relative;margin:5px 0;transition: 1s all;border:solid 1px #000;font-weight: bold;text-align: center;}
#EX1:hover{
    transform: skew(20deg); /* = Skew(20deg,0) */}
#EX2:hover{
    transform: skew(-20deg); /* عكس الحالة السابقة */ /* = Skew(-20deg,0) */}
#EX3:hover{
    transform: skew(0,20deg); /* Y هنا طبقنا الأمر حسب المحور */ }
#EX4:hover{
    transform: skew(0,-20deg); /* عكس الحالة السابقة Y على المحور */}
#EX5:hover{
    transform: skew(20deg,20deg); /* X و Y على المحور */}
transform: skew(20deg)
transform: skew(-20deg)
transform: skew(0,20deg)
transform: skew(0,-20deg)
transform: skew(20deg,20deg)

المثال الثاني SkewX  و SkewY

SkewX تمكنك من جعل عنصر معين ينحرف حسب المحور X
SkewY تمكنك من جعل عنصر معين ينحرف حسب المحور Y

<div id="EXSX" class="skewww"></div>
<div id="EXSY" class="skewww"></div>
.skewww{background-color: #006000;width: 300px;height: 150px;right: calc(50% - 150px);position: relative;margin:5px 0;transition: 1s all;border:solid 1px #000;font-weight: bold;text-align: center;}
#EXSX:hover{
transform: skewX(30deg);
}
#EXSY:hover{
    transform: skewY(30deg);
}
transform: skewX(30deg)
transform: skewY(30deg)
Tags:

إرسال تعليق

أحدث أقدم