Live
x
<div class="d-flex"> <section class="scene scene-perspective"> <h2>Сцена с перспективой</h2> <div class="box"><img src="https://assets.codepen.io/1425525/alvan-nee-iW8WH1Z5bFA-unsplash.jpg" /></div></section> <section class="scene"> <h2>Сцена без перспективы</h2> <div class="box"><img src="https://assets.codepen.io/1425525/alvan-nee-iW8WH1Z5bFA-unsplash.jpg" /></div> </section></div>
Live
xxxxxxxxxx52
html { width: 100vw; height: 100vh; display: flex; justify-content: center; align-items: center; margin: 0; font-family: sans-serif; text-align: center;}img { max-width: 100%;}.box { width: 200px; height: 200px; background: #03a9f4;}.scene { width: 200px; margin: 0 20px;} .scene-perspective { perspective: 800px;}.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.