في هذا الدرس 10تصفّح المواضيع
CSS 2D Transforms
تحويل العنصر إلي ثنائية أبعاد في لغة CSS
CSS 2D Transforms تحويل العنصر إلي ثنائية أبعاد في لغة CSS
تستخدم خاصية transform في تحويل العناصر إلي 2D عناصر ثنائية الأبعاد يمكن استخدامها في عمل [rotate, scale, move, skew] [تدوير ، تكبير، تحريك ، انحراف] في لغة CSS.
الدوال التي تستخدم مع خاصية transform لعمل 2D:
- ( )translate تحرك العنصر من موضعة الحالي ولها قيميتين القيمة الأول محور X والقيمة الثانية محور y.
- ( )rotate تحرك العنصر تقوم بتدوير العنصر في اتجاه عقارب الساعة ولها قيمة degree درجة الدوران.
- ()scale تكبر أو تصغر العنصر بناء علي القيمة التي تحدد للطول وللعرض.
- ()scaleX تكبر أو تصغر width عرض العنصر عن طريق القيمة.
- ()scaleY تكبر أو تصغر height عرض العنصر عن طريق القيمة.
- ()skew تستخدم للانحراف العنصر من محور X ومحور Y بناء علي القيمة degree.
- ()skewX تستخدم للانحراف العنصر من محور X بناء علي القيمة degree.
- ()skewY تستخدم للانحراف العنصر من محور Y بناء علي القيمة degree.
- ()matrix تجمع جميع قيم 2d بداخل خاصية واحدة.
CSS transform syntax
طريقة كتابة خاصية transform في لغة CSS.
transform:value;CSS transform values
قيم خاصة transform في لغة CSS.
transform:none|transform-functions|initial|inherit;
CSS 2D Transforms translate
خاصية transform مع translate في لغة CSS
CSS 2D Transforms translate خاصية transform مع translate في لغة CSS
CSS 2D Transforms translate
تحريك العنصر بخاصية transform مع القيمة translate في لغة CSS.
div
{
width: 250px;
height: 100px;
background-color: #2196F3;
border: 2px solid orange;
transform: translate(80px,90px);
color:white;
}
CSS 2D Transforms rotate
خاصية transform مع rotate في لغة CSS
CSS 2D Transforms rotate خاصية transform مع rotate في لغة CSS
CSS 2D Transforms rotate
تدوير العنصر بخاصية transform مع القيمة rotate في لغة CSS.
div
{
width: 250px;
height: 100px;
background-color: #2196F3;
border: 2px solid orange;
transform: rotate(35deg);
color:white;
margin-top:100px;
}
CSS 2D Transforms scale
خاصية transform مع scale في لغة CSS
CSS 2D Transforms scale خاصية transform مع scale في لغة CSS
CSS 2D Transforms scale
تكبير وتصغير العنصر بخاصية transform مع القيمة scale في لغة CSS.
div
{
width: 150px;
height: 75px;
background-color: #2196F3;
border: 2px solid orange;
transform: scale(2, 3);
color:white;
margin:100px;
}
CSS 2D Transforms scaleX
خاصية transform مع scaleX في لغة CSS
CSS 2D Transforms scaleX خاصية transform مع scaleX في لغة CSS
CSS 2D Transforms scaleX
تكبير وتصغير العنصر بخاصية transform مع القيمة scaleX في لغة CSS.
div
{
width: 200px;
height: 75px;
background-color: #2196F3;
border: 2px solid orange;
transform: scaleX(2);
color:white;
margin:100px;
}
CSS 2D Transforms scaleY
خاصية transform مع scaleY في لغة CSS
CSS 2D Transforms scaleY خاصية transform مع scaleY في لغة CSS
CSS 2D Transforms scaleY
تكبير وتصغير العنصر بخاصية transform مع القيمة scaleY في لغة CSS.
div
{
width: 200px;
height: 75px;
background-color: #2196F3;
border: 2px solid orange;
transform: scaleY(2);
color:white;
margin:100px;
}
CSS 2D Transforms skew
خاصية transform مع skew في لغة CSS
CSS 2D Transforms skew خاصية transform مع skew في لغة CSS
CSS 2D Transforms skew
تكبير وتصغير العنصر بخاصية transform مع القيمة skew في لغة CSS.
div
{
width: 200px;
height: 75px;
background-color: #2196F3;
border: 2px solid orange;
transform: skew(25deg);
color:white;
margin:100px;
}
CSS 2D Transforms skewX
خاصية transform مع skewX في لغة CSS
CSS 2D Transforms skewX خاصية transform مع skewX في لغة CSS
CSS 2D Transforms skewX
تكبير وتصغير العنصر بخاصية transform مع القيمة skewX في لغة CSS.
div
{
width: 200px;
height: 75px;
background-color: #2196F3;
border: 2px solid orange;
transform: skewX(35deg);
color:white;
margin:100px;
}
CSS 2D Transforms skewY
خاصية transform مع skewY في لغة CSS
CSS 2D Transforms skewY خاصية transform مع skewY في لغة CSS
CSS 2D Transforms skewY
تكبير وتصغير العنصر بخاصية transform مع القيمة skewY في لغة CSS.
div
{
width: 200px;
height: 75px;
background-color: #2196F3;
border: 2px solid orange;
transform: skewY(35deg);
color:white;
margin:100px;
}
CSS 2D Transforms matrix
خاصية transform مع matrix في لغة CSS
CSS 2D Transforms matrix خاصية transform مع matrix في لغة CSS
CSS 2D Transforms matrix
التحكم في الانحراف والتدوير والتكبير بخاصية transform مع القيمة matrix في لغة CSS.
div
{
width: 200px;
height: 75px;
background-color: #2196F3;
border: 2px solid orange;
transform: matrix(2, 0, 0.6, 1, 130, 0);
color:white;
margin:100px;
}سجّل الدخول لحفظ تقدمك
تابع إنجاز المواضيع والمصطلحات والمهام، وكمّل من آخر خطوة على أي جهاز.
المصطلحات12
راجع المعنى، اشرحه لنفسك، ثم علّم البطاقة كمفهومة.
- 01 Matrix مصفوفة
- للمراجعة
- 02 Transforms تحول
- للمراجعة
- 03 Transformations تحولات
- للمراجعة
- 04 Method طريقة
- للمراجعة
- 05 Translate ترجمة
- للمراجعة
- 06 Rotate تدوير
- للمراجعة
- 07 Scale مقياس
- للمراجعة
- 08 Scale-X قياس أفقي
- للمراجعة
- 09 Scale-Y قياس عمودي
- للمراجعة
- 10 Skew إنحراف
- للمراجعة
- 11 Skew-X إنحراف أفقي
- للمراجعة
- 12 Skew-Y إنحراف عامودي
- للمراجعة
لا توجد بطاقات تطابق البحث والتصفية.
اقرأ البطاقات بحرية. سجّل الدخول لحفظ تقدم مراجعتك.
الاختصارات1
راجع المعنى، اشرحه لنفسك، ثم علّم البطاقة كمفهومة.
- 01 CSS CSS
- Cascading Style Sheets
- صفحات الأنماط الانسيابية
- للمراجعة
لا توجد بطاقات تطابق البحث والتصفية.
اقرأ البطاقات بحرية. سجّل الدخول لحفظ تقدم مراجعتك.
اختبر فهمك.
ووصلها للإتقان.
كل سؤال خطوة لقدّام. اختار، اكتب كود، وشوف نتيجتك فورًا.
أكمل المهام، واجمع كل الإجابات الصحيحة. أقل من 100%؟ راجع وأعد المحاولة.
الأسئلة متاحة للاطلاع. سجّل الدخول للتفاعل وحفظ تقدمك.
لمحة عن التحدي3 أسئلة تنتظرك ＋
تستخدم الدالة ............في نقل العناصر من اماكنها بمقدار معين نقوم بتحديده
____