Skip to content
Advertisements

CSS Animation – 3D Box

Codepen:

CSS Animation – 3D Box

Github: https://github.com/Furkan-Gulsen/HTML-CSS-JAVASCRIPT/tree/master/3D%20Box


HTML CODE:

  <div id="container">
        <div id="top">
            <h2>truecodes.org</h2>
            <h4><i class="fab fa-instagram"></i>codeblogger</h4>
        </div>
        <div id="box">
            <div class="face1 color1"></div>
            <div class="face2 color1"></div>
            <div class="face3 color2"></div>
            <div class="face4 color2"></div>
            <div class="face5 color3"></div>
            <div class="face6 color3"></div>
        </div>
    </div>

CSS CODE:

body {
    background-color: #262626;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    height: 100vh;
    min-height: 600px;
}
#top {
    position: absolute;
    top: 25%;
    padding-bottom: 20px;
    border-bottom-color:#f0f0f0;
    border-bottom: 1px solid #ccc;
    text-align: center;
}
h2{
    font-family: Verdana;
    font-size: 2em;
    color: #f0f0f0;
}
h4 {
    font-family: sans-serif;
    margin-bottom: 0px;
    color: #f0f0f0
}
h4 i{
    margin-right:5px;
}
#container {
    height: 100vh;
    width: 50vw;
    min-height: 600px;
    min-width: 300px;
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    perspective: 500px;
}
#box * {
    width: 150px;
    height: 150px;
    backface-visibility:visible;
    position: absolute;
    margin: 0 auto;
}

#box {
    margin-top: 200px;
    transform-style: preserve-3d;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: skew 3s linear 0s infinite;
}
.face2 {
    transform: translateZ(-150px);
}

.face3 {
    transform: rotateX(90deg) translateZ(75px) translateY(-75px);
}

.face4 {
    transform: rotateX(90deg) translateZ(-75px) translateY(-75px);
}

.face5 {
    transform: rotateY(90deg) translateZ(-75px) translateX(75px);
}

.face6 {
    transform: rotateY(90deg) translateZ(75px) translateX(75px);
}
.color1 {
  background: linear-gradient(#ffffff, #f0f0f0, #eaeaea);
  opacity: 0.8;
}
.color2 {
  background: linear-gradient(#dbdbdb, #d2d2d2, #cecece);
  opacity: 0.8;
}
.color3 {
  background: linear-gradient(#d0d0d0, #c7c7c7, #c2c2c2);
  opacity: 0.8;
}
@keyframes skew {
  0% {
    transform: rotateY(0deg) rotateZ(0deg);
  }
  100% {
    transform: rotateY(360deg) rotateZ(360deg);
  }
}
Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.

%d bloggers like this: