css3 asoslari: effektlar, transformatsiya, animatsiya. css3 yordamida html sahifalarni tahrirlash.

PPTX 43 sahifa 543,0 KB Bepul yuklash

43 sahifa

FaylHub.uz

Telegram orqali yuklab olish

Hajm 543,0 KB

Fayl turi PPTX

Sahifalar 43

Yangilangan Dek 2025

Sahifa ko'rinishi (5 sahifa)

Pastga aylantiring 👇

1 / 43

html ga kirish css3 asoslari: effektlar, transformatsiya, animatsiya. css3 yordamida html sahifalarni tahrirlash. reja: css matn effektlari css da 2 o'lchovli transformatsiya css da 3 o'lchovli transformatsiya css animatsiyalar 2 css matn effektlari 3 xususiyat izoh text-align-last matnning oxirgi satri qanday tekislanishi kerakligini belgilaydi text-justify matnning qanday tekislanishi va intervalda joylashtirilishini belgilaydi text-overflow matn hajmi sig'masdan ko'rsatilmay qolganda foydalanuvchini qanday xabardor qilishni belgilaydi word-break skript ishtirok etmagan matnni qanday ajratilishini belgilaydi word-wrap uzun so'zlarni keyingi satrga ko'chirish belgilaydi writing-mode matn satrlarini gorizontal va vertikal holatda joylashuvini belgilaydi css matn effektlari: text-align-last text-align-last: auto|left|right|center|justify|start|end| initial|inherit; 4 div.a { text-align: justify; /* for edge */ -moz-text-align-last: right; /* for firefox prior 58.0 */ text-align-last: right; } div.b { text-align: justify; /* for edge */ -moz-text-align-last: center; /* for firefox prior 58.0 */ text-align-last: center; } div.c { text-align: justify; /* for edge */ -moz-text-align-last: justify; /* for firefox prior 58.0 */ text-align-last: …

2 / 43

word-wrap word-wrap: normal|break-word|initial|inherit; 8 div { width: 150px; border: 1px solid #000000; } div.a { word-wrap: normal; } div.b { word-wrap: break-word; } css matn effektlari: writing-mode writing-mode: horizontal-tb|vertical-rl|vertical-lr; 9 p.test1 { writing-mode: horizontal-tb; } p.test2 { writing-mode: vertical-rl; } span.test2 { writing-mode: vertical-rl; } css da 2 o'lchovli transformatsiya 10 xususiyat izoh transform elementga ikki va uch o'lchovli transformatsiyani qo'llaydi. transform-origin transformatsiya qilinayotgan elementlar holatini o'zgartirish imkoniyatini beradi funktsiya izoh matrix(n,n,n,n,n,n) olti qiymatli matritsadan foydalanib, 2 o'lchovli transformatsiya hosil qilinadi. translate(x,y) elementni x va y o'qi bo'ylab 2 o'lchovli ko'chirishni amalga oshiradi. translatex(n) elementni x o'qi bo'ylab 2 o'lchovli ko'chirishni amalga oshiradi. translatey(n) elementni y o'qi bo'ylab 2 o'lchovli ko'chirishni amalga oshiradi. scale(x,y) 2 o'lchovli transformatsiyaning kengligi va balandligini o'zgartirishni amalga oshiradi. scalex(n) 2 o'lchovli transformatsiyaning kengligi o'zgartirishni amalga oshiradi. scaley(n) 2 o'lchovli transformatsiyaning balandligini o'zgartirishni amalga oshiradi. rotate(angle) ma'lum burchak asosida 2 o'lchovli aylantirishni amalga oshiradi. skew(x-angle,y-angle) elementni …

3 / 43

afari 3-8 */ transform: skewy(20deg); } css da 2 o'lchovli transformatsiya: transform 12 div.c { width: 100px; height: 80px; background-color: yellow; -ms-transform: scaley(1.5); /* ie 9 */ -webkit-transform: scaley(1.5); /* safari 3-8 */ transform: scaley(1.5); } css da 2 o'lchovli transformatsiya: transform-origin transform-origin: x-axis y-axis z-axis|initial|inherit; 13 qiymat izoh x-axis x o'qi bo'ylab joylashuvini aniqlaydi. left, center, right, length, % larni qabul qiladi. y-axis y o'qi bo'ylab joylashuvini aniqlaydi. top, center, bottom, length, % larni qabul qiladi. z-axis 3 o'lchovli transformatsiyada z o'qi bo'ylab joylashuvini aniqlaydi. length ni qabul qiladi. css da 2 o'lchovli transformatsiya: matrix(n,n,n,n,n,n) matrix(scalex(),skewy(),skewx(),scaley(),translatex(), translatey()) 14 div { width: 300px; height: 100px; background-color: yellow; border: 1px solid black; } div#mydiv1 { -ms-transform: matrix(1, -0.3, 0, 1, 0, 0); /* ie 9 */ -webkit-transform: matrix(1, -0.3, 0, 1, 0, 0); /* safari prior 9.0 */ transform: matrix(1, -0.3, 0, 1, 0, 0); /* standard syntax */ } div#mydiv2 …

4 / 43

ckground-color: yellow; border: 1px solid black; } div#mydiv { -ms-transform: rotate(20deg); /* ie 9 */ -webkit-transform: rotate(20deg); /* safari prior 9.0 */ transform: rotate(20deg); /* standard syntax */ } css da 2 o'lchovli transformatsiya: skewx(angle), skewy(angle) 18 div { width: 300px; height: 100px; background-color: yellow; border: 1px solid black; } div#mydiv { -ms-transform: skewx(20deg); /* ie 9 */ -webkit-transform: skewx(20deg); /* safari prior 9.0 */ transform: skewx(20deg); /* standard syntax */ } div#mydiv2 { -ms-transform: skewy(20deg); /* ie 9 */ -webkit-transform: skewy(20deg); /* safari prior 9.0 */ transform: skewy(20deg); /* standard syntax */ } css da 3 o'lchovli transformatsiya 19 xususiyat izoh transform elementga ikki va uch o'lchovli transformatsiyani qo'llaydi. transform-origin transformatsiya qilinayotgan elementlar holatini o'zgartirish imkoniyatini beradi transform-style ichma-ich elementlarning 3 o'lchovli fazoda qanday ko'rsatilishini belgilaydi perspective 3 o'lchovli elementlarning aksonometrik ko'rinishini belgilaydi. perspective-origin 3 o'lchovli elementlarning pastki joylashuvini (pozitsiyasini) belgilaydi. backface-visibility ekranga qarama-qarshi bo'lganda element ko'rinishi yoki ko'rinmasligini …

5 / 43

asshtabini y o'qi bo'ylab o'zgartirishni amalga oshiradi. scalez(z) 3 o'lchovli transformatsiyaning masshtabini z o'qi bo'ylab o'zgartirishni amalga oshiradi. rotate3d(x,y,z,angle) ma'lum burchak asosida 3 o'lchovli aylantirishni amalga oshiradi. rotatex(angle) elementni x o'qi bo'ylab 3 o'lchovli aylantirishni amalga oshiradi. rotatey(angle) elementni y o'qi bo'ylab 3 o'lchovli aylantirishni amalga oshiradi. rotatez(angle) elementni z o'qi bo'ylab 3 o'lchovli aylantirishni amalga oshiradi. css da 3 o'lchovli transformatsiya: transform-style transform-style: flat|preserve-3d|initial|inherit; 21 #div1 { position: relative; height: 200px; width: 200px; margin: 100px; padding: 10px; border: 1px solid black; } #div2 { padding: 50px; position: absolute; border: 1px solid black; background-color: red; -webkit-transform: rotatey(60deg); /* safari 3-8 */ -webkit-transform-style: preserve-3d; /* safari 4-8 */ transform: rotatey(60deg); transform-style: preserve-3d; } #div3 { padding: 40px; position: absolute; border: 1px solid black; background-color: yellow; -webkit-transform: rotatey(-60deg); /* safari 3-8 */ transform: rotatey(-60deg); } hello yellow css da 3 o'lchovli transformatsiya: perspective perspective: length|none; 22 #div1 { position: relative; height: 150px; …

Ko'proq o'qimoqchimisiz?

Barcha 43 sahifani Telegram orqali bepul yuklab oling.

To'liq faylni yuklab olish

"css3 asoslari: effektlar, transformatsiya, animatsiya. css3 yordamida html sahifalarni tahrirlash." haqida

html ga kirish css3 asoslari: effektlar, transformatsiya, animatsiya. css3 yordamida html sahifalarni tahrirlash. reja: css matn effektlari css da 2 o'lchovli transformatsiya css da 3 o'lchovli transformatsiya css animatsiyalar 2 css matn effektlari 3 xususiyat izoh text-align-last matnning oxirgi satri qanday tekislanishi kerakligini belgilaydi text-justify matnning qanday tekislanishi va intervalda joylashtirilishini belgilaydi text-overflow matn hajmi sig'masdan ko'rsatilmay qolganda foydalanuvchini qanday xabardor qilishni belgilaydi word-break skript ishtirok etmagan matnni qanday ajratilishini belgilaydi word-wrap uzun so'zlarni keyingi satrga ko'chirish belgilaydi writing-mode matn satrlarini gorizontal va vertikal holatda joylashuvini belgilaydi css matn effektlari: text-align-last...

Bu fayl PPTX formatida 43 sahifadan iborat (543,0 KB). "css3 asoslari: effektlar, transformatsiya, animatsiya. css3 yordamida html sahifalarni tahrirlash."ni yuklab olish uchun chap tomondagi Telegram tugmasini bosing.

Teglar: css3 asoslari: effektlar, trans… PPTX 43 sahifa Bepul yuklash Telegram