Learn CSS In Arabic 2021 - #65 - 2D Transform - Scale

Показать описание

2D Transform - Scale

Code & Notice:

Assignments:

=============================

Support Me on Patreon to Help me Create More Videos

I will be Very Happy if you Support my Channel.

Join Our Facebook Group:

Follow My Facebook Profile:

Like Facebook Page:

Follow Me On Twitter:

Рекомендации по теме

Комментарии

شكر جزيل يا أستاذ أسامة، لي تقريباً اكثر من ستة شهور ابحث عن محتوى اقدر افهم فيه html و css أو البرمجة بصفة عامة بحثت في كثير من القنوات والمواقع عربي وانجليزي اخذت اكثر من كورس ما قدرت استوعب البرمجة ، بالصدفة لما لقيت قناتك بصراحة استفد منك الكثير وتقدمت خطوات كبيرة في شهراً تقريباً في html, css الكورس هذا انا ماني مصدق انه مجاناً شكراً مره ثانية وثالثة ورابعة .

hamzaabdullah

الكود الخاص بالدرس
HTML
<div class="shape">
<span class="origin"></span>
<span class="x-axis"></span>
<span class="y-axis"></span>
<div>Transform</div>
</div>

CSS
body {
font-family:Arial, Helvetica, sans-serif
}
.shape {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 300px;
height: 300px;
background-color: #eee;
}
.shape .x-axis::before {
content: "";
width: 100%;
height: 2px;
background-color: black;
bottom: -20px;
position: absolute;
}
.shape .x-axis::after {
content: "X-Axis";
position: absolute;
bottom: -28px;
left: 50%;
transform: translateX(-50%);
background-color: #fff;
width: 60px;
text-align: center;
font-weight: bold;
}
.shape .y-axis::before {
content: "";
width: 2px;
height: 100%;
background-color: black;
left: -20px;
position: absolute;
}
.shape .y-axis::after {
content: "Y-Axis";
position: absolute;
left: -28px;
top: 50%;
transform: translateY(-50%);
background-color: #fff;
height: 60px;
text-align: center;
font-weight: bold;
writing-mode: vertical-lr;
}
.shape > div {
width: 90%;
height: 90%;
background-color: rgb(255 0 0 / 39%);
color: white;
display: flex;
justify-content: center;
align-items: center;
font-weight: bold;
font-size: 30px;
margin-left: 5%;
margin-top: 5%;
transition: 0.5s
}
.shape .origin {
position: absolute;
width: 20px;
height: 20px;
background-color: red;
border-radius: 50%;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}

AhmedBdrZanata

الله عليك . ده حاجه مبدعه جدا ربنا ينفعنا بعلمك يارب

TheMaster

و يرفع الله الذين امنوا منكم و الذين اوتوا العلم درجات بارك الله لك و عليك و زادك بسطة فى العلم و الجسم

wkeyikc

النقاط التي ناقشها الفيديو:
قيمة ال scale. و: 0:37
خاصية ال transform:scale. و: 1:25

ahmedm

الف مليون مبروك وصولك مليون مشترك وعقبال 10 واكتر انشاء الله حضرتك تستاهل كل خير وتستحق لقب بشمهندس عن جداره أنا بحبك ف الله اقسم بالله حضرتك أنا متابع قديم يمكن قبل ال 50 الف ربنا يكثر من أمثالك ويجعل مثوانا جميعا الجنه يا رب

_trend