CSS3 yordamida 3d menu
Salom. Hozirgi kunda CSS3 ni nimalarga qodir ekanligini ko'rib o'zim ham hayratdaman. Bugun oddiyroq menuni ko'ramiz. Hech qanday JS kerakmas, hammasi faqat CSS da yozilgan.
Avvalo 2 ta fayl yarating.
3dmenu.html fayl
Manimcha bu faylni izohlashimga hojat yo'q.
3dmenu.css fayl
buni ham tushintirishim shart bo'lmasa kerak.
Endi asosiy joyiga o'tamiz.
Umuman CSS da 2d, 3d bilan ishlaydigan attribute bu transform bo'lib u o'ziga quyidagi funksiyalarni oladi.
X,Y,Z — bu kodrinata o'qlari. translate, scale, rotate lar 2d da 2 ta parametr, 3d da uchta parametr oladi. Bu funksiyalarni ishlatish uchun kompyuter grafikasidan ozgina bo'lsada tushuncha bo'lishi lozim.
Endi 3d menuga aylantiradigan css ni yozamiz.
Cross browser qilish uchun ushbu css ni dublikat qilib ff uchun -moz, ie uchun -ms so'zlarini qo'shish kerak. Chrome uchun o'zim keltirganman. Misolni ko'rish
Agar CSS ni ko'rgan bo'lsangiz qigan ishim unchalik ko'p emas:
perspective(600px) — ko'rinishi burchagini aniqlash
translate3d(0, 0, -200px) — har bi A tegini Z o'qi bo'yicha 200px orqaga (minus qo'yilgani uchun) surish
rotate3d(1, 0, 0, 180deg) — A tegini X o'qi bo'yicha 180 gradusga aylantir. Agar shu burchakni 45deg qilsangiz, obyektlar boshqacha ko'rinishga o'tadi.
Qolgani animatsiya.
Umuman olganda chiroqli narsani yaratish uchun ko'p narsa ishlatish kerak emas, faqat hamma narsani o'z o'rnida ishlatish kerak holos.
Avvalo 2 ta fayl yarating.
3dmenu.html fayl
<!DOCTYPE html>
<html>
<head>
<title>3d menu</title>
<link type="text/css" rel="stylesheet" href="3dmenu.css" />
</head>
<body>
<div class='menu'>
<ul>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
</ul>
</div>
</body>
</html>Manimcha bu faylni izohlashimga hojat yo'q.
3dmenu.css fayl
* {
margin: 0;
padding: 0;
font-size: 12px;
font-family: Arial;
}
body {
background: #333;
padding: 20px;
}
.menu {
position: absolute;
top: 200px;
left: 200px;
}
.menu ul,
.menu li,
.menu a {
display: block;
height: 200px;
}
.menu li {
width: 120px;
float: left;
margin-right: 20px;
}
.menu a {
background: #fff url(menubd2.jpg) 0 0 no-repeat; /** rams 120x400 px */
cursor: pointer;
width: 120px;
}buni ham tushintirishim shart bo'lmasa kerak.
Endi asosiy joyiga o'tamiz.
Umuman CSS da 2d, 3d bilan ishlaydigan attribute bu transform bo'lib u o'ziga quyidagi funksiyalarni oladi.
- 2d uchun
- translate — obyekni surish
- rotate — obyekni aylantirish
- scale — obyekni siqish
- 3d uchun
- translate3d — obyekni surish
- rotate3d — obyekni aylantirish
- scale3d — obyekni siqish
- perspective — perspektiv ko'rish burchagini aniqlaydi. Bitta parametr qabul qiladi (px da)
- Umumiy
- translateX
- translateY
- translateZ
- rotateX
- rotateY
- rotateZ
- scaleX
- scaleY
- scaleZ
X,Y,Z — bu kodrinata o'qlari. translate, scale, rotate lar 2d da 2 ta parametr, 3d da uchta parametr oladi. Bu funksiyalarni ishlatish uchun kompyuter grafikasidan ozgina bo'lsada tushuncha bo'lishi lozim.
Endi 3d menuga aylantiradigan css ni yozamiz.
@keyframes r3d-0{
0% {
opacity: 1;
background-position: 0 -200px;
transform: perspective(600px) translate3d(0, 0, 0) rotate3d(1, 0, 0, 180deg);
}
100% {
opacity: 0.5;
background-position: 0 0px;
transform: perspective(600px) translate3d(0, 0, -200px) rotate3d(1, 0, 0, 0deg);
}
}
@keyframes r3d-1{
0% {
opacity: 0.5;
box-shadow: 0 0 10px #fff;
background-position: 0 0px;
transform: perspective(600px) translate3d(0, 0, -200px) rotate3d(1, 0, 0, 0deg);
}
100% {
opacity: 1;
box-shadow: 0 0 20px #ffff00;
background-position: 0 -200px;
transform: perspective(600px) translate3d(0, 0, 0) rotate3d(1, 0, 0, 180deg);
}
}
.menu a {
transform: perspective(600px) translate3d(0, 0, -200px) rotate3d(1, 0, 0, 0deg);
opacity: 0.5;
box-shadow: 0 0 10px #fff;
animation-name: r3d-0;
animation-duration: 0.5s;
animation-timing-function: linear;
animation-iteration-count: 1;
animation-play-state: runing;
}
.menu li:hover a {
box-shadow: 0 0 20px #ffff00;
background-position: 0 -200px;
opacity: 1;
transform: perspective(600px) translate3d(0, 0, 0) rotate3d(1, 0, 0, 180deg);
animation-name: r3d-1;
}
/*** FOR CHROME ***/
@-webkit-keyframes r3d-0{
0% {
opacity: 1;
background-position: 0 -200px;
-webkit-transform: perspective(600px) translate3d(0, 0, 0) rotate3d(1, 0, 0, 180deg);
}
100% {
opacity: 0.5;
background-position: 0 0px;
-webkit-transform: perspective(600px) translate3d(0, 0, -200px) rotate3d(1, 0, 0, 0deg);
}
}
@-webkit-keyframes r3d-1{
0% {
opacity: 0.5;
box-shadow: 0 0 10px #fff;
background-position: 0 0px;
-webkit-transform: perspective(600px) translate3d(0, 0, -200px) rotate3d(1, 0, 0, 0deg);
}
100% {
opacity: 1;
box-shadow: 0 0 20px #ffff00;
background-position: 0 -200px;
-webkit-transform: perspective(600px) translate3d(0, 0, 0) rotate3d(1, 0, 0, 180deg);
}
}
.menu a {
-webkit-transform: perspective(600px) translate3d(0, 0, -200px) rotate3d(1, 0, 0, 0deg);
-webkit-box-shadow: 0 0 10px #fff;
-webkit-animation-name: r3d-0;
-webkit-animation-duration: 0.5s;
-webkit-animation-timing-function: linear;
-webkit-animation-iteration-count: 1;
-webkit-animation-play-state: runing;
}
.menu li:hover a {
-webkit-box-shadow: 0 0 20px #ffff00;
-webkit-transform: perspective(600px) translate3d(0, 0, 0) rotate3d(1, 0, 0, 180deg);
-webkit-animation-name: r3d-1;
}Cross browser qilish uchun ushbu css ni dublikat qilib ff uchun -moz, ie uchun -ms so'zlarini qo'shish kerak. Chrome uchun o'zim keltirganman. Misolni ko'rish
Agar CSS ni ko'rgan bo'lsangiz qigan ishim unchalik ko'p emas:
perspective(600px) — ko'rinishi burchagini aniqlash
translate3d(0, 0, -200px) — har bi A tegini Z o'qi bo'yicha 200px orqaga (minus qo'yilgani uchun) surish
rotate3d(1, 0, 0, 180deg) — A tegini X o'qi bo'yicha 180 gradusga aylantir. Agar shu burchakni 45deg qilsangiz, obyektlar boshqacha ko'rinishga o'tadi.
Qolgani animatsiya.
Umuman olganda chiroqli narsani yaratish uchun ko'p narsa ishlatish kerak emas, faqat hamma narsani o'z o'rnida ishlatish kerak holos.
opennet.uz/examples/1/3dmenu/menubd2.jpg