O’zbekiston Respublikasi Axborot Texnologiyalari va Kommunikatsiyalarni Rivojlantirish Vazirligi

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>

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

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

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

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

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