Skip to content

Instantly share code, notes, and snippets.

@uhidontkno

uhidontkno/css-only-interactive-cube.markdown

Created August 30, 2023 16:57
Show Gist options
  • Save uhidontkno/59204b02406c19fa419a4f37611f5cf9 to your computer and use it in GitHub Desktop.
Save uhidontkno/59204b02406c19fa419a4f37611f5cf9 to your computer and use it in GitHub Desktop.
Download ZIP
CSS Only Interactive Cube
Raw
index.html
<section>
<div class="wrapper">
<div class="header">
<a href="https://codepen.io/challenges/2023/february/2" target="_blank">
<h1>#CodePenChallenge: Cubes</h1>
</a>
<!-- <a href="https://codepen.io/ikthreeo" target="_blank">
<p>by ikthreeo</p>
</a> -->
</div>
<div class="cubes-grid">
<div class="item">
<div class="cube">
<div class="cube-face front">
<div>
<img src="https://assets.codepen.io/2702297/internal/avatars/users/default.png?format=auto&version=1587392747" width="70%">
</div>
</div>
<div class="cube-face back">
<div>Change the CSS variables to change my width and height.</div>
</div>
<div class="cube-face right">
<div>right</div>
</div>
<div class="cube-face left">
<div>left</div>
</div>
<div class="cube-face top">
<div class="top-content">Click Me!</div>
</div>
</div>
</div>
<div class="item">
<div class="cube">
<div class="cube-face front">
<div>
<img src="https://assets.codepen.io/2702297/internal/avatars/users/default.png?format=auto&version=1587392747" width="70%">
</div>
</div>
<div class="cube-face back">
<div>Change the CSS variables to change my width and height.</div>
</div>
<div class="cube-face right">
<div>right</div>
</div>
<div class="cube-face left">
<div>left</div>
</div>
<div class="cube-face top">
<div class="top-content">Click Me!</div>
</div>
</div>
</div>
<div class="item">
<div class="cube">
<div class="cube-face front">
<div>
<img src="https://assets.codepen.io/2702297/internal/avatars/users/default.png?format=auto&version=1587392747" width="70%">
</div>
</div>
<div class="cube-face back">
<div>Change the CSS variables to change my width and height.</div>
</div>
<div class="cube-face right">
<div>right</div>
</div>
<div class="cube-face left">
<div>left</div>
</div>
<div class="cube-face top">
<div class="top-content">Click Me!</div>
</div>
</div>
</div>
<div class="item">
<div class="cube">
<div class="cube-face front">
<div>
<img src="https://assets.codepen.io/2702297/internal/avatars/users/default.png?format=auto&version=1587392747" width="70%">
</div>
</div>
<div class="cube-face back">
<div>Change the CSS variables to change my width and height.</div>
</div>
<div class="cube-face right">
<div>right</div>
</div>
<div class="cube-face left">
<div>left</div>
</div>
<div class="cube-face top">
<div class="top-content">Click Me!</div>
</div>
</div>
</div>
<div class="item">
<div class="cube">
<div class="cube-face front">
<div>
<img src="https://assets.codepen.io/2702297/internal/avatars/users/default.png?format=auto&version=1587392747" width="70%">
</div>
</div>
<div class="cube-face back">
<div>Change the CSS variables to change my width and height.</div>
</div>
<div class="cube-face right">
<div>right</div>
</div>
<div class="cube-face left">
<div>left</div>
</div>
<div class="cube-face top">
<div class="top-content">Click Me!</div>
</div>
</div>
</div>
<div class="item">
<div class="cube">
<div class="cube-face front">
<div>
<img src="https://assets.codepen.io/2702297/internal/avatars/users/default.png?format=auto&version=1587392747" width="70%">
</div>
</div>
<div class="cube-face back">
<div>Change the CSS variables to change my width and height.</div>
</div>
<div class="cube-face right">
<div>right</div>
</div>
<div class="cube-face left">
<div>left</div>
</div>
<div class="cube-face top">
<div class="top-content">Click Me!</div>
</div>
</div>
</div>
</div>
</div>
</section>
Raw
style.css
:root {
/* Set cube size */
--w: 256px;
--h: 256px;
/* Other variables */
--start-pos: translateZ(-8rem) rotateX(330deg) rotateY(-45deg);
--end-pos: translateZ(-8rem) rotateY(180deg);
--anim-duration: 350ms;
--half-w: calc(var(--w) / 2);
--half-h: calc(var(--h) / 2);
}
/* Base Styles */
body {
margin: 0;
background: #dfdfe6;
color: #202124;
font-family: sans-serif;
}
section {
position: relative;
width: 100%;
padding: 32px 0 64px;
background-image: linear-gradient(
110deg,
hsl(240deg 12% 89%) 0%,
hsl(240deg 16% 88%) 39%,
hsl(240deg 19% 86%) 61%,
hsl(240deg 21% 85%) 100%
);
}
.header {
margin: 16px 0 128px;
}
h1,
p,
a {
color: #202124;
margin: 0px 0px 10px;
text-decoration: none;
}
h1:hover,
p:hover {
color: #14189d;
}
h1 {
font-size: 32px;
}
p {
font-size: 18px;
font-weight: bold;
text-align: right;
}
.wrapper {
max-width: 1920px;
margin: 0 auto;
display: flex;
flex-direction: column;
align-items: center;
}
.cubes-grid {
width: 100%;
max-width: calc(var(--w) * 5);
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: auto;
gap: calc(var(--h) * 0.5) 1.5em;
justify-items: center;
align-items: center;
margin-bottom: 64px;
}
/* 3D Cube Styles */
.item {
width: var(--w);
height: var(--h);
}
.cube {
position: relative;
width: 100%;
height: 100%;
transform-style: preserve-3d;
transform: scale(0.9) var(--start-pos);
transition: transform var(--anim-duration);
/* background-color: rgba(40, 40, 40, 0.1); */
}
.item:hover .cube {
transform: var(--end-pos) scale(1);
}
.cube-face {
position: absolute;
width: 100%;
height: 100%;
}
.cube-face div {
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
}
.front img {
opacity: 0.8;
}
.front {
transform: rotateY(0deg) translateZ(var(--half-w));
background: linear-gradient(
122deg,
rgba(232, 232, 237, 0.9) 0%,
rgba(218, 218, 226, 0.9) 100%
);
}
.right {
transform: rotateY(90deg) translateZ(var(--half-w));
background: linear-gradient(
122deg,
rgba(202, 204, 212, 0.9) 0%,
rgba(199, 202, 213, 0.9) 100%
);
}
.back {
transform: rotateY(180deg) translateZ(var(--half-w));
background: linear-gradient(
122deg,
rgba(199, 202, 213, 0.9) 0%,
rgba(202, 204, 212, 0.9) 100%
);
}
.left {
transform: rotateY(-90deg) translateZ(var(--half-w));
background: linear-gradient(
122deg,
rgba(218, 218, 226, 0.9) 0%,
rgba(232, 232, 237, 0.9) 100%
);
}
.top {
widht: var(--w);
height: var(--w);
transform: rotateX(90deg) translateZ(var(--half-w));
background: linear-gradient(
122deg,
rgba(238, 239, 242, 0.9) 0%,
rgba(231, 232, 236, 0.9) 100%
);
}
.top-content {
transform: rotateZ(-45deg);
}
@media screen and (max-width: 1150px) {
.cubes-grid {
grid-template-columns: 1fr 1fr;
}
}
@media screen and (max-width: 700px) {
.cubes-grid {
grid-template-columns: 1fr;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment