Simple 3D Gallery With Only CSS

Monday, 26/10/2020

Tram Ho

Introduce

Create creative, automated photo galleries with just CSS rotating through images in simple 3D space without using javascript. Below are the steps. You can refer to this codepen:

Steps to be taken

Create HTML and add images to create an image list frame

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span> div</span> <span class="token attr-name">class</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> rotator <span class="token punctuation">"</span></span> <span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span> div</span> <span class="token attr-name">class</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> items <span class="token punctuation">"</span></span> <span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span> img</span> <span class="token attr-name">src</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> 1.jpg <span class="token punctuation">"</span></span> <span class="token attr-name">alt</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> Image Alt <span class="token punctuation">"</span></span> <span class="token punctuation">/&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span> div</span> <span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span> div</span> <span class="token attr-name">class</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> items <span class="token punctuation">"</span></span> <span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span> img</span> <span class="token attr-name">src</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> 2.jpg <span class="token punctuation">"</span></span> <span class="token attr-name">alt</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> Image Alt <span class="token punctuation">"</span></span> <span class="token punctuation">/&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span> div</span> <span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span> div</span> <span class="token attr-name">class</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> items <span class="token punctuation">"</span></span> <span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span> img</span> <span class="token attr-name">src</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> 3.jpg <span class="token punctuation">"</span></span> <span class="token attr-name">alt</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> Image Alt <span class="token punctuation">"</span></span> <span class="token punctuation">/&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span> div</span> <span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span> div</span> <span class="token attr-name">class</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> items <span class="token punctuation">"</span></span> <span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span> img</span> <span class="token attr-name">src</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> 4.jpg <span class="token punctuation">"</span></span> <span class="token attr-name">alt</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> Image Alt <span class="token punctuation">"</span></span> <span class="token punctuation">/&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span> div</span> <span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span> div</span> <span class="token attr-name">class</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> items <span class="token punctuation">"</span></span> <span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span> img</span> <span class="token attr-name">src</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> 5.jpg <span class="token punctuation">"</span></span> <span class="token attr-name">alt</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> Image Alt <span class="token punctuation">"</span></span> <span class="token punctuation">/&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span> div</span> <span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span> div</span> <span class="token attr-name">class</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> items <span class="token punctuation">"</span></span> <span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span> img</span> <span class="token attr-name">src</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> 6.jpg <span class="token punctuation">"</span></span> <span class="token attr-name">alt</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> Image Alt <span class="token punctuation">"</span></span> <span class="token punctuation">/&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span> div</span> <span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span> div</span> <span class="token attr-name">class</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> items <span class="token punctuation">"</span></span> <span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span> img</span> <span class="token attr-name">src</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> 7.jpg <span class="token punctuation">"</span></span> <span class="token attr-name">alt</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> Image Alt <span class="token punctuation">"</span></span> <span class="token punctuation">/&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span> div</span> <span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span> div</span> <span class="token attr-name">class</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> items <span class="token punctuation">"</span></span> <span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span> img</span> <span class="token attr-name">src</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> 8.jpg <span class="token punctuation">"</span></span> <span class="token attr-name">alt</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> Image Alt <span class="token punctuation">"</span></span> <span class="token punctuation">/&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span> div</span> <span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span> div</span> <span class="token attr-name">class</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> items <span class="token punctuation">"</span></span> <span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span> img</span> <span class="token attr-name">src</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> 9.jpg <span class="token punctuation">"</span></span> <span class="token attr-name">alt</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> Image Alt <span class="token punctuation">"</span></span> <span class="token punctuation">/&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span> div</span> <span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span> div</span> <span class="token punctuation">&gt;</span></span>

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

Styles for rotating photo gallery

<span class="token selector">.rotator</span> <span class="token punctuation">{</span>
  <span class="token property">position</span> <span class="token punctuation">:</span> absolute <span class="token punctuation">;</span>
  <span class="token property">left</span> <span class="token punctuation">:</span> 0 <span class="token punctuation">;</span>
  <span class="token property">right</span> <span class="token punctuation">:</span> 0 <span class="token punctuation">;</span>
  <span class="token property">margin</span> <span class="token punctuation">:</span> auto <span class="token punctuation">;</span>
  <span class="token property">width</span> <span class="token punctuation">:</span> 55% <span class="token punctuation">;</span>
  <span class="token property">height</span> <span class="token punctuation">:</span> 150px <span class="token punctuation">;</span>
  <span class="token property">transform-style</span> <span class="token punctuation">:</span> preserve-3d <span class="token punctuation">;</span>
  <span class="token property">animation</span> <span class="token punctuation">:</span> roter 17s linear infinite <span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token selector">.rotator:hover</span> <span class="token punctuation">{</span>
  <span class="token property">animation-play-state</span> <span class="token punctuation">:</span> paused <span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token atrule"><span class="token rule">@keyframes</span> roter</span> <span class="token punctuation">{</span>
  <span class="token selector">from</span> <span class="token punctuation">{</span>
    <span class="token property">transform</span> <span class="token punctuation">:</span> <span class="token function">rotateY</span> <span class="token punctuation">(</span> 0deg <span class="token punctuation">)</span> <span class="token punctuation">;</span>
  <span class="token punctuation">}</span>
  <span class="token selector">to</span> <span class="token punctuation">{</span>
    <span class="token property">transform</span> <span class="token punctuation">:</span> <span class="token function">rotateY</span> <span class="token punctuation">(</span> 360deg <span class="token punctuation">)</span> <span class="token punctuation">;</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>

<span class="token selector">.items</span> <span class="token punctuation">{</span>
  <span class="token property">position</span> <span class="token punctuation">:</span> absolute <span class="token punctuation">;</span>
  <span class="token property">height</span> <span class="token punctuation">:</span> 100% <span class="token punctuation">;</span>
  <span class="token property">width</span> <span class="token punctuation">:</span> 100% <span class="token punctuation">;</span>
  <span class="token property">overflow</span> <span class="token punctuation">:</span> hidden <span class="token punctuation">;</span>
  <span class="token property">border</span> <span class="token punctuation">:</span> 2px solid #333 <span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token selector">.items:hover img</span> <span class="token punctuation">{</span>
  <span class="token property">transform</span> <span class="token punctuation">:</span> <span class="token function">scale</span> <span class="token punctuation">(</span> 1.2 <span class="token punctuation">)</span> <span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token selector">.items img</span> <span class="token punctuation">{</span>
  <span class="token property">height</span> <span class="token punctuation">:</span> 100% <span class="token punctuation">;</span>
  <span class="token property">width</span> <span class="token punctuation">:</span> 100% <span class="token punctuation">;</span>
  <span class="token property">transition</span> <span class="token punctuation">:</span> all 3s ease <span class="token punctuation">;</span>
<span class="token punctuation">}</span>

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

}

to {

}

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

}

Determine the initial position of each image

<span class="token selector">.items:first-child</span> <span class="token punctuation">{</span>
  <span class="token property">transform</span> <span class="token punctuation">:</span> <span class="token function">rotateY</span> <span class="token punctuation">(</span> <span class="token function">calc</span> <span class="token punctuation">(</span> 40deg * 1 <span class="token punctuation">)</span> <span class="token punctuation">)</span> <span class="token function">translateZ</span> <span class="token punctuation">(</span> 300px <span class="token punctuation">)</span> <span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token selector">.items:nth-child(2)</span> <span class="token punctuation">{</span>
  <span class="token property">transform</span> <span class="token punctuation">:</span> <span class="token function">rotateY</span> <span class="token punctuation">(</span> <span class="token function">calc</span> <span class="token punctuation">(</span> 40deg * 2 <span class="token punctuation">)</span> <span class="token punctuation">)</span> <span class="token function">translateZ</span> <span class="token punctuation">(</span> 300px <span class="token punctuation">)</span> <span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token selector">.items:nth-child(3)</span> <span class="token punctuation">{</span>
  <span class="token property">transform</span> <span class="token punctuation">:</span> <span class="token function">rotateY</span> <span class="token punctuation">(</span> <span class="token function">calc</span> <span class="token punctuation">(</span> 40deg * 3 <span class="token punctuation">)</span> <span class="token punctuation">)</span> <span class="token function">translateZ</span> <span class="token punctuation">(</span> 300px <span class="token punctuation">)</span> <span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token selector">.items:nth-child(4)</span> <span class="token punctuation">{</span>
  <span class="token property">transform</span> <span class="token punctuation">:</span> <span class="token function">rotateY</span> <span class="token punctuation">(</span> <span class="token function">calc</span> <span class="token punctuation">(</span> 40deg * 4 <span class="token punctuation">)</span> <span class="token punctuation">)</span> <span class="token function">translateZ</span> <span class="token punctuation">(</span> 300px <span class="token punctuation">)</span> <span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token selector">.items:nth-child(5)</span> <span class="token punctuation">{</span>
  <span class="token property">transform</span> <span class="token punctuation">:</span> <span class="token function">rotateY</span> <span class="token punctuation">(</span> <span class="token function">calc</span> <span class="token punctuation">(</span> 40deg * 5 <span class="token punctuation">)</span> <span class="token punctuation">)</span> <span class="token function">translateZ</span> <span class="token punctuation">(</span> 300px <span class="token punctuation">)</span> <span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token selector">.items:nth-child(6)</span> <span class="token punctuation">{</span>
  <span class="token property">transform</span> <span class="token punctuation">:</span> <span class="token function">rotateY</span> <span class="token punctuation">(</span> <span class="token function">calc</span> <span class="token punctuation">(</span> 40deg * 6 <span class="token punctuation">)</span> <span class="token punctuation">)</span> <span class="token function">translateZ</span> <span class="token punctuation">(</span> 300px <span class="token punctuation">)</span> <span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token selector">.items:nth-child(7)</span> <span class="token punctuation">{</span>
  <span class="token property">transform</span> <span class="token punctuation">:</span> <span class="token function">rotateY</span> <span class="token punctuation">(</span> <span class="token function">calc</span> <span class="token punctuation">(</span> 40deg * 7 <span class="token punctuation">)</span> <span class="token punctuation">)</span> <span class="token function">translateZ</span> <span class="token punctuation">(</span> 300px <span class="token punctuation">)</span> <span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token selector">.items:nth-child(8)</span> <span class="token punctuation">{</span>
  <span class="token property">transform</span> <span class="token punctuation">:</span> <span class="token function">rotateY</span> <span class="token punctuation">(</span> <span class="token function">calc</span> <span class="token punctuation">(</span> 40deg * 8 <span class="token punctuation">)</span> <span class="token punctuation">)</span> <span class="token function">translateZ</span> <span class="token punctuation">(</span> 300px <span class="token punctuation">)</span> <span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token selector">.items:nth-child(9)</span> <span class="token punctuation">{</span>
  <span class="token property">transform</span> <span class="token punctuation">:</span> <span class="token function">rotateY</span> <span class="token punctuation">(</span> <span class="token function">calc</span> <span class="token punctuation">(</span> 40deg * 9 <span class="token punctuation">)</span> <span class="token punctuation">)</span> <span class="token function">translateZ</span> <span class="token punctuation">(</span> 300px <span class="token punctuation">)</span> <span class="token punctuation">;</span>
<span class="token punctuation">}</span>

.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 ) ;

}

Conclusion

Simple, just 3 simple steps, you have a very creative photo library

Reference: https://www.cssscript.com/3d-rotator-gallery/

Share the news now

Source : Viblo

Simple 3D Gallery With Only CSS

Introduce

Steps to be taken

Conclusion

TikTok becomes the second largest social platform in South Africa

The fastest depreciating after 9 months of launch, iPhone 14 Pro Max continues to break the bottom in Vietnam

Beginner's guide to R: Introduction

10 essential SublimeText plugins for JavaScript developers