linkedin facebook linkedin facebook nod32

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.

Parol:
Eslab qolish.


Ro`yhatdan o`tish


Рейтинг@Mail.ru
Рейтинг@Mail.ru

Besucherzahler
счетчик посещений