Author: | Ahmed Abdelsalam |
---|---|
Views Total: | 2,576 views |
Official Page: | Go to website |
Last Update: | October 8, 2020 |
License: | MIT |
Preview:

Description:
A creative, automatic, CSS only photo gallery that rotates through images in a 3D space.
How to use it:
1. Add images to the rotator gallery.
<div class="rotator"> <div class="items"> <img src="1.jpg" alt="Image Alt" /> </div> <div class="items"> <img src="2.jpg" alt="Image Alt" /> </div> <div class="items"> <img src="3.jpg" alt="Image Alt" /> </div> <div class="items"> <img src="4.jpg" alt="Image Alt" /> </div> <div class="items"> <img src="5.jpg" alt="Image Alt" /> </div> <div class="items"> <img src="6.jpg" alt="Image Alt" /> </div> <div class="items"> <img src="7.jpg" alt="Image Alt" /> </div> <div class="items"> <img src="8.jpg" alt="Image Alt" /> </div> <div class="items"> <img src="9.jpg" alt="Image Alt" /> </div> </div>
2. The core styles for the rotator gallery.
.rotator { position: absolute; left: 0; right: 0; margin: auto; width: 55%; height: 150px; transform-style: preserve-3d; animation: roter 17s linear infinite; } .rotator:hover { animation-play-state: paused; } @keyframes roter { from { transform: rotateY(0deg); } to { transform: rotateY(360deg); } } .items { position: absolute; height: 100%; width: 100%; overflow: hidden; border: 2px solid #333; } .items:hover img { transform: scale(1.2); } .items img { height: 100%; width: 100%; transition: all 3s ease; }
3. Determine the initial position for each image. That’s it.
.items:first-child { transform: rotateY(calc(40deg * 1)) translateZ(300px); } .items:nth-child(2) { transform: rotateY(calc(40deg * 2)) translateZ(300px); } .items:nth-child(3) { transform: rotateY(calc(40deg * 3)) translateZ(300px); } .items:nth-child(4) { transform: rotateY(calc(40deg * 4)) translateZ(300px); } .items:nth-child(5) { transform: rotateY(calc(40deg * 5)) translateZ(300px); } .items:nth-child(6) { transform: rotateY(calc(40deg * 6)) translateZ(300px); } .items:nth-child(7) { transform: rotateY(calc(40deg * 7)) translateZ(300px); } .items:nth-child(8) { transform: rotateY(calc(40deg * 8)) translateZ(300px); } .items:nth-child(9) { transform: rotateY(calc(40deg * 9)) translateZ(300px); }
Amazing Gallery , thank you in advance .