Illusion Effect Using HTML & CSS | Step-by-Step Tutorial

HTML CODE

find html code

CSS CODE

*{
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
html{
  height: 100%;
}

body{
  display: flex;
  flex-direction: column;
  min-height: 100%;
  margin: 0;
  background: #e7e5d8;
  color: #333;
}
a{
  color: inherit;
}
.intro {
  width: 90%;
  max-width: 30rem;
  padding-bottom: 1rem;
  margin: 0 auto 1rem;
  padding-top: .5rem;
  font-size: calc(1rem + 2vmin);
  text-transform: capitalize;
  border-bottom: 1px dashed rgba(0,0,0, 0.3);
  text-align: center;
}
.intro small{
  display: block;
  opacity: 0.5;
  font-style: italic;
  text-transform: none;
}

.box{
  display: flex;
  justify-content: center;
  align-items: center;
  flex: 1;
  width: 100%;
  max-width: 40rem;
  margin: 0 auto;
}
.penrose-box{
  position: relative;
  width: 15rem;
  height: 15rem;
}
.di{
  position: absolute;
  bottom: 0;
  left: 3rem;
  width: 3rem;
  height: 3rem;
  transform-style: preserve-3d;
  transform: rotateX(-35.25deg) rotateY(44.95deg);
  transition: transform 2s;
}
.penrose-box:hover .di{
  transform: rotateX(-33.25deg) rotateY(22.5deg);
}

.s{
  position: absolute;
  left: 0;
  top: 0;
  width: 15rem;
  height: 3rem;
  transform-style: preserve-3d;
  transform-origin: 0% 100%;
  background-image: linear-gradient(to left, transparent 3rem, currentcolor);
}
.s:before{
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  transform-origin: 50% 0%;
  transform: rotateX(-90deg);
  background-image: linear-gradient(to left, transparent 3rem, currentcolor);
}
.s-x{
  color: #9c4057;
  background: #b76979;
}
.s-x::before{
  color: #dab2b0;
  background: #f1efe2;
}
.s-y{
  left: 1px;
  transform: rotateZ(-90deg);
  color: #882941;
  background: #9c4057;
  background-image: linear-gradient(-150deg, currentcolor 2.595rem, transparent 3.24375rem);
}
.s-y::before{
  color: rgba(218,178,176,0.75);
  background: #b76979;
}
.s-z{
  left: -1px;
  transform-origin: 100% 0%;
  transform: rotateY(90deg) translate3d(3rem, 0, 3rem);
  color: #f1efe2;
  background: #dab2b0;
}
.s-z::before{
  color: #b76979;
  background-image: linear-gradient(45deg, transparent 2.1213256871rem, currentcolor 2.1213256871rem);

}

.s-z::after{
  content: "";
  position: absolute;
  width: 4.24263rem;
  height: 3rem;
  transform-origin: 0% 50%;
  transform: translate3d(0.6px, 0, 0.1px) rotateY(45deg);
  background: #882941;
}

Download complete code from GITHub illusion Animation Animation IN PURE CSS

To Watch More Video as Like these

Just Subscribe My Youtube Channel DarkCoders

and Hit The Bell Icon