Frontend Forever App
We have a mobile app for you to download and use. And you can unlock many features in the app.
Get it now
Intall Later
Run
HTML
CSS
Javascript
Output
Document
@charset "UTF-8"; @import url(https://fonts.googleapis.com/css?family=Nunito+Sans:300,400,600,700,800); *, :after, :before { box-sizing: border-box; padding: 0; margin: 0; } body{ background: linear-gradient(90deg,blue,skyblue,blue); } img{ width: 320px; height: 200px; position: absolute; } .container{ width: 350px; height: 200px; position: relative; margin-top: 15%; margin-left: 40%; perspective: 1000px; transform-style: preserve-3d; transform: rotateX(-10deg) rotateZ(-10deg); animation: ror 20s linear infinite; } @keyframes ror{ 50%{ transform: rotateX(30deg); } 80%{ transform: rotateX(-30deg); } } .images{ width: 100%; position: absolute; transform-style: preserve-3d; animation: rotate 20s linear infinite; } @keyframes rotate{ from{ } to{ transform: rotateY(360deg); } } img:nth-child(1){ transform: rotateY(60deg) translateZ(300px); } img:nth-child(2){ transform: rotateY(120deg) translateZ(300px); } img:nth-child(3){ transform: rotateY(180deg) translateZ(300px); } img:nth-child(4){ transform: rotateY(240deg) translateZ(300px); } img:nth-child(5){ transform: rotateY(300deg) translateZ(300px); } img:nth-child(6){ transform: rotateY(360deg) translateZ(300px); } img:hover{ width: 340px; height: 220px; cursor: pointer; }
console.log("Event Fired")