Skip to content

Instantly share code, notes, and snippets.

@CarpeNecopinum

CarpeNecopinum/index.html

Created November 22, 2019 13:00
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save CarpeNecopinum/d48d41a2da41c8b442c744854a76ee09 to your computer and use it in GitHub Desktop.
Save CarpeNecopinum/d48d41a2da41c8b442c744854a76ee09 to your computer and use it in GitHub Desktop.
Download ZIP
overlapping squares in css
Raw
index.html
<html>
<head>
<style type="text/css">
body {
transform-style: preserve-3d;
}
.thing {
position: absolute;
width: 100px;
height: 100px;
background-color: white;
border: 2px solid black;
transform-style: preserve-3d;
}
.thing:nth-child(1) {
background-color: red;
transform: translate(500px, 500px) rotate(0deg) translate(66px, 0px) rotateX(10deg);
}
.thing:nth-child(2) {
background-color: green;
transform: translate(500px, 500px) rotate(90deg) translate(66px, 0px) rotateX(10deg);
}
.thing:nth-child(3) {
background-color: blue;
transform: translate(500px, 500px) rotate(180deg) translate(66px, 0px) rotateX(10deg);
}
.thing:nth-child(4) {
background-color: silver;
transform: translate(500px, 500px) rotate(270deg) translate(66px, 0px) rotateX(10deg);
}
</style>
</head>
<body>
<div class="thing"></div>
<div class="thing"></div>
<div class="thing"></div>
<div class="thing"></div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment