O’zbekiston Respublikasi Axborot Texnologiyalari va Kommunikatsiyalarni Rivojlantirish Vazirligi



Yüklə 483,61 Kb.
tarix01.12.2022
ölçüsü483,61 Kb.
#71700
3-amaliy ish


O’zbekiston Respublikasi Axborot Texnologiyalari va
Kommunikatsiyalarni Rivojlantirish Vazirligi

Muhammad Al-Xorazmiy Nomidagi Toshkent Axborot Texnologiyalari Universiteti


Mavzu: CSSda table, display, transition va 2D, 3D transform effektlarini qo'llash. Formalarga still berish.

Topshirdi:Oripov Mironshoh


Tekshirdi:Nabiyev Inomjon

Toshkent 2022


2D Transformation of Elements - 2D elementlarning konvertatsiyasi


CSS3 2D transformatsiya funktsiyasi yordamida siz ikki o'lchovli makonda elementlarni siljitish, aylantirish, o'lchash va qiyshash kabi asosiy o'zgartirish manipulyatsiyalarini bajarishingiz mumkin.
O'zgartirilgan element atrofdagi elementlarga ta'sir qilmaydi, lekin mutlaqo joylashtirilgan elementlar singari ularni bir-biriga yopishtirishi mumkin. Shu bilan birga, o'zgartirilgan element hali ham o'zining standart (o'zgartirilmagan) joyida makonda bo'sh joyni egallaydi.

Using CSS Transform and Transform Functions - CSS-ni o'zgartirish va o'zgartirish funktsiyalaridan foydalanish


CSS3 transformxususiyati transformatsiya effektini qo'llash uchun element tomonidan ishlatiladigan koordinatalar tizimini boshqarish uchun transformatsiya funktsiyalaridan foydalanadi.
Quyidagi bo'limda ushbu o'zgartirish funktsiyalari tavsiflanadi:

The translate() Functio - ntranslate()Function


Elementni joriy holatidan X va Y o'qlari bo'ylab yangi joyga ko'chiradi. Buni quyidagicha yozish mumkin translate(tx, ty). Agar tyko'rsatilmagan bo'lsa, uning qiymati nolga teng bo'ladi.

DOCTYPE html>








Document







Marvel


Lorem, ipsum dolor sit amet consectetur adipisicing elit. Facere
temporibus cum quis ex non! Rem ea accusamus doloremque! Sequi
sapiente provident eligendi, eaque dolorem voluptatum animi
eveniet id ad vero.








Spiderman


Lorem, ipsum dolor sit amet consectetur adipisicing elit. Facere
temporibus cum quis ex non! Rem ea accusamus doloremque! Sequi
sapiente provident eligendi, eaque dolorem voluptatum animi
eveniet id ad vero.








Tor


Lorem, ipsum dolor sit amet consectetur adipisicing elit. Facere
temporibus cum quis ex non! Rem ea accusamus doloremque! Sequi
sapiente provident eligendi, eaque dolorem voluptatum animi
eveniet id ad vero.








Hulk


Lorem, ipsum dolor sit amet consectetur adipisicing elit. Facere
temporibus cum quis ex non! Rem ea accusamus doloremque! Sequi
sapiente provident eligendi, eaque dolorem voluptatum animi
eveniet id ad vero.







body{
background: #555;


}
.cards{
display: flex;
align-items: center;
justify-content: center;
}
h1{
margin: 0;padding: 0;
}
.card__wrap{
perspective: 800px;
}
.card{
max-width: 220px;
margin: 0 20px;
text-align: center;
background: #fff;
border-radius: 20px;
overflow: hidden;
transition: all .3s;
transform: rotateY(-40deg);
box-shadow: 10px 30px 20px 0px #000;
}
.card__wrap:hover .card{

transform: rotateY(0deg);


}
.card img{
width: 100%;
}
.card__body{
padding: 10px 20px;
}
.card__title1 {
color:red;
padding: 0;
margin: 0;}
.card__title2 {
color:blue;}
.card__title3 {
color:brown;}
.card__title4 {
color:yellowgreen;}
.card__body button{
width: 100%;
border-radius:10px;
}
.card__btn1{
background-color:red;
}
.card__btn2{
background-color:blue;
}
.card__btn3{
background-color:brown;
}
.card__btn4{
background-color:yellowgreen;
}
Yüklə 483,61 Kb.

Dostları ilə paylaş:




Verilənlər bazası müəlliflik hüququ ilə müdafiə olunur ©azkurs.org 2024
rəhbərliyinə müraciət

gir | qeydiyyatdan keç
    Ana səhifə


yükləyin