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

PPTX 43 pages 543.0 KB Free download

43 pages

FaylHub.uz

Download via Telegram

Size 543.0 KB

File type PPTX

Pages 43

Updated Dec 2025

Page preview (5 pages)

Scroll down 👇

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

Want to read more?

Download all 43 pages for free via Telegram.

Download full file

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

This file contains 43 pages in PPTX format (543.0 KB). To download "css3 asoslari: effektlar, transformatsiya, animatsiya. css3 yordamida html sahifalarni tahrirlash.", click the Telegram button on the left.

Tags: css3 asoslari: effektlar, trans… PPTX 43 pages Free download Telegram