Some perspective 2
How do I make an some perspective 2?
What is a some perspective 2? How do you make a some perspective 2? This script and codes were developed by Andy Vanee on 21 September 2022, Wednesday.
Some perspective 2 - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>some perspective 2</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"> <div class="panel"> <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> <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>
Some perspective 2 - Script Codes CSS Codes
*, *:after, *:before { box-sizing: border-box;
}
body, html { background-color: #f2f2f2;
}
h1 { font-size: 2.5vh; margin: 0 0 1em; color: black;
}
main { width: 45vh; margin: 4em auto; perspective: 1000px; font-size: 1.75vh; font-weight: 100; letter-spacing: 0.05em;
}
.front, .left, .right, .back { position: absolute; opacity: 1; background-color: #ccc; border: 1px solid #ccc; height: 65vh; transform-origin: 22.5vh;
}
.front, .back { width: 45vh; background-color: #aaa;
}
.front .panel, .back .panel { padding: 2em 2em 3em; opacity: 0.95; background-color: white;
}
.left, .right { width: 2vh;
}
.front { z-index: 10; opacity: 1; transform: rotateY(44deg) translateZ(1vh) translateX(0);
}
.back { z-index: 1; transform: rotateY(44deg) translateZ(-1vh) translateX(0); box-shadow: -15px 25px 90px rgba(0, 0, 0, 0.6);
}
.left { z-index: 2; transform: rotateY(134deg) translateZ(-22.5vh) translateX(21.5vh);
}
.right { z-index: 2; transform: rotateY(134deg) translateZ(22.5vh) translateX(21.5vh);
}
.z-wrapper { position: relative; width: 45vh; height: 65vh; perspective: 700px; transform: rotateZ(-30deg) rotateY(0) translateZ(-1vh);
}
Some perspective 2 - 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);
});
Developer | Andy Vanee |
Username | andyvanee |
Uploaded | September 21, 2022 |
Rating | 3 |
Size | 4,282 Kb |
Views | 20,240 |
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!
Name | Size |
Ambient Animation | 4,186 Kb |
FlipKittens | 2,464 Kb |
Some perspective | 3,812 Kb |
Table with Fixed Header | 4,293 Kb |
Css bullets | 1,618 Kb |
MaybeOn | 3,129 Kb |
Responsive Banner with VW | 1,688 Kb |
Even more perspective | 4,367 Kb |
Lazerbeamz | 2,891 Kb |
Splash-to-header | 5,323 Kb |
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!
Name | Username | Size |
Barber Shop | Bhlaird | 6,270 Kb |
A bit of elegance | Hackthevoid | 9,095 Kb |
A Pen by Kevin | Kevinkenger | 2,642 Kb |
Playing with FlexBox | _Billy_Brown | 3,162 Kb |
IbrahimJabbari-Effect14 | Ibrahimjabbari | 1,919 Kb |
TheCalendar.js | The-teacher | 6,330 Kb |
Simple animated hover effect | Pobee-norris | 3,044 Kb |
Add This API | ThatGuySam | 2,848 Kb |
Flickering Light Text Effect | Mandymichael | 3,315 Kb |
Fluid Responsive Typography | Jonmilner | 4,205 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!