Ma`lumotlar : 1092
Xabarlar soni: 314
Bugun: 29.3.2024
Soat: 12:29
Oddiy CSS 3D charxpalak
Muallif: Mengliyev SH.
Qo`shilgan sana: 2014-07-01
Oddiy CSS 3D charxpalak rasm
CCSS3 yordamida 3D charxpalakni tuzish.
HTML
Bu galereya juda oson. Ular figure elementlar div ga qoplangan.
<div id=gallery>
<figure id=spinner >
<img src=wanaka-tree.jpg alt="">
<img src=still-lake.jpg alt="">
<img src=pink-milford-sound.jpg alt="">
<img src=paradise.jpg alt="">
<img src=morekai.jpg alt="">
<img src=milky-blue-lagoon.jpg alt="">
<img src=lake-tekapo.jpg alt="">
<img src=milford-sound.jpg alt="">
</figure>
</div>
CSS
Boshlang’ich CCS ham juda oddiy barcha elementlar figure atrofida.
body { background: #100000; font-size: 1.5em; }
div#gallery { perspective: 1200px; }
figure#spinner { transform-style: preserve-3d; min-height: 122px; transform-origin: 50% 50% -500px; transition: 1s; }
figure#spinner img { width: 40%; position: absolute; left: 30%; transform-origin-z: 50% 50% -500px; outline: 1px solid transparent; }
Keyin tasvirning bir tekisligini nth-child orqali qilinadi.
figure#spinner img:nth-child(1) { transform:rotateY(0deg); }
figure#spinner img:nth-child(2) { transform:rotateY(-45deg); }
figure#spinner img:nth-child(3) { transform:rotateY(-90deg); }
figure#spinner img:nth-child(4) { transform:rotateY(-135deg); }
figure#spinner img:nth-child(5) { transform:rotateY(-180deg); }
figure#spinner img:nth-child(6) { transform:rotateY(-225deg); }
figure#spinner img:nth-child(7) { transform:rotateY(-270deg); }
figure#spinner img:nth-child(8) { transform:rotateY(-315deg); }
Ekranni hajmini kattalashtirgan vaqt masofa ortadi. Ushbu listingda pref brauzer olib tashlangan.To’liq kodni keyingi saxifadan olasiz.
JavaScript
Siz qo’shimcha bir qancha element charxpalakni aylantirgan xolda qo’yasiz.
<a href=# style=float:leftonclick="galleryspin('-')">?</a>
<a href=# style=float:rightonclick="galleryspin('')">?</a>
"<" klikda chap strelka ">" minus belgisi beriladi.
var angle = 0;
function galleryspin(sign) {
spinner = document.querySelector("#spinner");
if (!sign) { angle = angle + 45; } else {angle = angle - 45; }
spinner.setAttribute("style","-webkit-transform: rotateY("+ angle +"deg); transform: rotateY("+ angle +"deg);");
}
Olingan ma’no qarab galereyaga 40 gradusga aralashadi.
www.rd.uz/products.php sayt misol keltirilgan
<div id="innerCarousel">
<a href="images/carousel/1_big.jpg" rel="lightbox"><img class="cloudcarousel" src="images/carousel/1.png" alt="Nexia" /></a>
<a href="images/carousel/2_big.jpg" rel="lightbox"><img class="cloudcarousel" src="images/carousel/2.png" alt="Matiz" /></a>
<a href="images/carousel/3_big.jpg" rel="lightbox"><img class="cloudcarousel" src="images/carousel/3.png" alt="Damas" /></a>
<a href="images/carousel/4_big.jpg" rel="lightbox"><img class="cloudcarousel" src="images/carousel/4.png" alt="Spark" /></a>
<a href="images/carousel/5_big.jpg" rel="lightbox"><img class="cloudcarousel" src="images/carousel/5.png" alt="Gentra" /></a>
<a href="images/carousel/6_big.jpg" rel="lightbox"><img class="cloudcarousel" src="images/carousel/6.png" alt="Cobalt" /></a>
<a href="images/carousel/7_big.jpg" rel="lightbox"><img class="cloudcarousel" src="images/carousel/7.png" alt="Captiva" /></a>
<a href="images/carousel/8_big.jpg" rel="lightbox"><img class="cloudcarousel" src="images/carousel/8.png" alt="Orlando" /></a>
<a href="images/carousel/9_big.jpg" rel="lightbox"><img class="cloudcarousel" src="images/carousel/9.png" alt="Malibo" /></a>
<a href="images/carousel/10_big.jpg" rel="lightbox"><img class="cloudcarousel" src="images/carousel/10.png" alt="Lacett" /></a>
2434 marta o`qildi.