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

PPTX 43 стр. 543,0 КБ Бесплатная загрузка

43 стр.

FaylHub.uz

Скачать через Telegram

Размер 543,0 КБ

Тип файла PPTX

Страницы 43

Обновлено Дек 2025

Предварительный просмотр (5 стр.)

Прокрутите вниз 👇

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; …

Хотите читать дальше?

Скачайте все 43 страниц бесплатно через Telegram.

Скачать полный файл

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

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...

Этот файл содержит 43 стр. в формате PPTX (543,0 КБ). Чтобы скачать "css3 asoslari: effektlar, transformatsiya, animatsiya. css3 yordamida html sahifalarni tahrirlash.", нажмите кнопку Telegram слева.

Теги: css3 asoslari: effektlar, trans… PPTX 43 стр. Бесплатная загрузка Telegram