Animated 3D Logo Box
Making 3D design in HTML and CSS is an art of the skill specialy with the animation.
So the css transform properties comes in for the 3D and css keyframes for the animations.
Watch Video Tutorial
https://youtu.be/ioYNabHPoVs
Live Preview.!
HTML AND CSS ANIMATED 3D LOGO BOX
CSS Code
*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
.box-wrapper{
width: 100%;
height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background: rgba(0,0,0,0.5) url(background.jpg) no-repeat;
background-blend-mode: multiply;
background-size: cover;
}
.box-wrapper h1{
text-align: center;
color: #fff;
}
.box-wrapper .box{
width: 200px;
height: 200px;
position: relative;
transform-style: preserve-3d;
transform: rotateX(-10deg) rotateY(30deg);
z-index: 3;
}
.box-wrapper .box:after{
content: '';
width: 200px;
height: 200px;
position: absolute;
transform: rotateX(90deg) rotateY(0deg) translateZ(-100px);
background-color: rgba(255,255,255,0.1);
box-shadow: 0 0 1px 1px rgba(204, 228, 249, 0.5),
inset 2px 2px 1px 1px rgba(204, 228, 249, 0.1),
inset -2px -2px 1px 1px rgba(204, 228, 249, 0.1);
z-index: 2;
}
.box-wrapper .box span{
width: 100%;
height: 100%;
display: block;
position: absolute;
top: 0;
left: 0;
background-color: rgba(255,255,255,0.1);
box-shadow: 0 0 1px 1px rgba(204, 228, 249, 0.5),
inset 2px 2px 1px 1px rgba(204, 228, 249, 0.1),
inset -2px -2px 1px 1px rgba(204, 228, 249, 0.1);
transform-style: preserve-3d;
transform: rotateY(calc(90deg * var(--x))) translateZ(100px);
}
.box-wrapper div.img-box{
width: 90%;
height: 90%;
position: absolute;
background: #fff url(logo-200x200.png);
background-repeat: repeat-x;
background-size: 200px;
background-position: center center;
border-radius: 50%;
box-shadow: inset 1px -5px 15px rgba(0,0,0,1), 0 0 5px rgba(255,255,255,0.3);
transform: rotateY(-30deg);
z-index: 3;
animation: animateImageIn 5s linear infinite alternate;
}
.box-wrapper .base{
width: 100%;
height: 45vh;
position: absolute;
top: 55vh;
background: linear-gradient(to top, rgba(0,0,0,1) 30%, rgba(0,0,0,0.5) 120%);
z-index: 2;
}
.box-wrapper .reflaction{
width: 200px;
height: 100px;
position: relative;
z-index: 1;
}
.box-wrapper .reflaction .box{
width: 200px;
height: 200px;
position: absolute;
transform: rotateX(-10deg) rotateY(30deg);
}
.box-wrapper .reflaction div.img-box{
transform: rotateY(-30deg) rotateX(-180deg);
}
@keyframes animateBox{
0%{
transform: rotateX(-10deg) rotateY(40deg);
}
100%{
transform: rotateX(-10deg) rotateY(360deg);
}
}
@keyframes animateImage{
0%{
transform: rotateY(-40deg);
}
100%{
transform: rotateY(360deg);
}
}
@keyframes animateImageIn{
0%{
background-position: center center;
}
100%{
background-position: -1500% center;
}
}
HTML Code
<div class="box-wrapper">
<div class="box">
<div class="img-box"></div>
<span style="--x:0;"></span>
<span style="--x:1;"></span>
<span style="--x:2;"></span>
<span style="--x:3;"></span>
</div>
<div class="base"></div>
<div class="reflaction">
<div class="box reflaction">
<div class="img-box"></div>
<span style="--x:0;"></span>
<span style="--x:1;"></span>
<span style="--x:2;"></span>
<span style="--x:3;"></span>
</div>
</div>
</div>
0 Comments