Live
x
<div class="d-flex"> <section class="scene scene-perspective-200"> <h2>Перспектива 200 пикселей</h2> <div class="box"><img src="https://assets.codepen.io/1425525/alvan-nee-iW8WH1Z5bFA-unsplash.jpg" /></div> </section> <section class="scene scene-perspective-800"> <h2>Перспектива 800 пикселей</h2> <div class="box"><img src="https://assets.codepen.io/1425525/alvan-nee-iW8WH1Z5bFA-unsplash.jpg" /></div> </section> <section class="scene scene-perspective-5000"> <h2>Перспектива 5000 пикселей</h2> <div class="box"><img src="https://assets.codepen.io/1425525/alvan-nee-iW8WH1Z5bFA-unsplash.jpg" /></div> </section></div>
Live
xxxxxxxxxx60
html { width: 100vw; height: 100vh; display: flex; justify-content: center; align-items: center; margin: 0; font-family: sans-serif; text-align: center;}.box { width: 200px; height: 200px; background: #03a9f4;}img { max-width: 100%;}.scene { width: 200px; margin: 0 20px;} .scene-perspective-200 { perspective: 200px;}.scene-perspective-800 { perspective: 800px;}.scene-perspective-5000 { perspective: 5000px;}.box { animation: rotare-animation 10s infinite;}.d-flex { display: flex;}@keyframes rotare-animation { from { transform: rotateX(0deg); } to { transform: rotateX(360deg); }}
External CSS
This Pen doesn't use any external CSS resources.
External JavaScript
This Pen doesn't use any external JavaScript resources.