Even more perspective

Developer
Andy Vanee
Size
4,367 Kb
Views
24,288
  1. Even more perspective Previews
  2. Even more perspective HTML Codes
  3. Even more perspective CSS Codes
  4. Even more perspective JS Codes

How do I make an even more perspective?

What is a even more perspective? How do you make a even more perspective? This script and codes were developed by Andy Vanee on 21 September 2022, Wednesday.

Even more perspective Previews
IQ Test

Even more perspective - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Even more perspective</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <main> <div class="z-wrapper"> <div class="front"> <h1> Hello World! </h1> <p> It was November. Although it was not yet late, the sky was dark when I turned into Laundress Passage. Father had finished for the day, switched off the shop lights and closed the shutters; but so I would not come home to darkness he had left on the light over the stairs to the flat. Through the glass in the door it cast a foolscap rectangle of paleness onto the wet pavement, and it was while I was standing in that rectangle, about to turn my key in the door, that I first saw the letter. Another white rectangle, it was on the fifth step from the bottom, where I couldn't miss it. </p> <p> I closed the door and put the shop key in its usual place behind Bailey's Advanced Principles of Geometry. Poor Bailey. No one has wanted his fat gray book for thirty years. Sometimes I wonder what he makes of his role as guardian of the bookshop keys. I don't suppose it's the destiny he had in mind for the masterwork that he spent two decades writing. </p> </div> <div class="left"></div> <div class="right"></div> <div class="back"></div> </div>
</main> <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Even more perspective - Script Codes CSS Codes

*, *:after, *:before { box-sizing: border-box;
}
h1 { font-size: 2.5vh; margin: 0 0 1em; color: black;
}
main { width: 50vh; margin: 4em auto; perspective: 1000px; box-shadow: 0 100px 100px rgba(0, 0, 0, 0.2); background-color: rgba(0, 0, 0, 0.1); font-size: 1.75vh;
}
.front, .left, .right, .back { position: absolute; opacity: 0.4; height: 70vh; transform-origin: 25vh;
}
.front, .back { width: 50vh; padding: 2em;
}
.left, .right { width: 10vh;
}
.front { opacity: 0.7; background-color: pink; animation: front-keyframes 8s infinite linear;
}
@keyframes front-keyframes { 0% { transform: rotateY(0deg) translateZ(5vh) translateX(0); } 100% { transform: rotateY(360deg) translateZ(5vh) translateX(0); }
}
.back { background-color: red; animation: back-keyframes 8s infinite linear;
}
@keyframes back-keyframes { 0% { transform: rotateY(0deg) translateZ(-5vh) translateX(0); } 100% { transform: rotateY(360deg) translateZ(-5vh) translateX(0); }
}
.left { background-color: blue; animation: left-keyframes 8s infinite linear;
}
@keyframes left-keyframes { 0% { transform: rotateY(90deg) translateZ(-25vh) translateX(20vh); } 100% { transform: rotateY(450deg) translateZ(-25vh) translateX(20vh); }
}
.right { background-color: green; animation: right-keyframes 8s infinite linear;
}
@keyframes right-keyframes { 0% { transform: rotateY(90deg) translateZ(25vh) translateX(20vh); } 100% { transform: rotateY(450deg) translateZ(25vh) translateX(20vh); }
}
.z-wrapper { position: relative; width: 50vh; height: 70vh; perspective: 1000px; animation: zanimate 24s infinite ease-in-out;
}
@keyframes zanimate { 0% { transform: rotateZ(-50deg) translateZ(-5vh); } 50% { transform: rotateZ(50deg) translateZ(-5vh); } 100% { transform: rotateZ(-50deg) translateZ(-5vh); }
}

Even more perspective - Script Codes JS Codes

"use strict";
$(function () { // setInterval(()=> { // let text = $('.front p').first().text().split(''); // let first = text.pop(); // text.unshift(first); // $('.front p').first().text(text.join('')); // }, 300);
});
Even more perspective - Script Codes
Even more perspective - Script Codes
Home Page Home
Developer Andy Vanee
Username andyvanee
Uploaded September 21, 2022
Rating 3
Size 4,367 Kb
Views 24,288
Do you need developer help for Even more perspective?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Andy Vanee (andyvanee) Script Codes
Name
MaybeOn
Table with Fixed Header
Historical Data
Some perspective
Harmoniclock-16
Some perspective 2
Harmoniclock Spiro
Splash-to-header
Generic Stock
FlipKittens
Create amazing love letters with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!