비전공자 개발일기

Rotating 3D Image Cube 본문

HTML _CSS

Rotating 3D Image Cube

HiroDaegu 2022. 7. 22. 00:10
728x90
SMALL

 

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>ROTAING 3D IMAGE CUBE</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="wrapper">
    <div class="cube">
      <div class="side back"></div>
      <div class="side left"></div>
      <div class="side right"></div>
      <div class="side top"></div>
      <div class="side bottom"></div>
      <div class="side front"></div>
    </div>
  </div>
</body>
</html>
* {
  background-color: #2598EB;
}

.wrapper {
  --imagesize: 300px;
  --transform: calc(var(--imagesize) / 2);
  perspective: 800px;
}

.wrapper:hover {
  transform: scale(1.5);
}

.cube {
  transform-style: preserve-3d;
  position: relative;
  width: var(--imagesize);
  height: var(--imagesize);
  animation: rotate 10s ease-in-out infinite;
  transform-origin: center center;
  margin: 250px auto;
}

.side {
  position: absolute;
  width: inherit;
  height: inherit;
  background-color: #333;
  opacity: .95;
  background-size: cover;
  background-repeat: no-repeat;
}

.wrapper:hover .side {
  opacity: 1;
}

.back {
  transform: translateZ(-150px) rotateX(180deg);
  background-image: url("https://cdn.pixabay.com/photo/2018/03/31/03/46/kitten-3277268_960_720.png");
  background-position: center;
}

.left {
  transform: translateX(-150px) rotateY(90deg);
  background-image: url("https://cdn.pixabay.com/photo/2017/10/14/15/50/banana-2850841_960_720.png");
}

.right {
  transform: translateX(var(--transform)) rotateY(90deg);
  background-image: url("https://cdn.pixabay.com/photo/2016/03/31/23/37/bird-1297727_960_720.png");
}

.top {
  transform: translateY(-150px) rotateX(90deg);
  background-image: url("https://cdn.pixabay.com/photo/2014/04/03/10/00/panda-309548_960_720.png");
}

.bottom {
  transform: translateY(var(--transform)) rotateX(270deg);
  background-image: url("https://cdn.pixabay.com/photo/2016/03/31/21/12/cartoon-1296251_960_720.png");
}

.front {
  transform: translateZ(var(--transform));
  background-image: url("https://cdn.pixabay.com/photo/2017/02/01/09/56/animal-2029279_960_720.png");
}

@keyframes rotate {
  0% {
    transform: rotateX(0);
  }
  12.5% {
    transform: rotateY(90deg);
  }
  25% {
    transform: rotateY(270deg);
  }
  37.5% {
    transform: rotateY(270deg);
  }
  50% {
    transform: rotateY(360deg);
  }
  62.5% {
    transform: rotateX(90deg);
  }
  75% {
    transform: rotateX(180deg);
  }
  87.5% {
    transform: rotateX(270deg);
  }
  100% {
    transform: rotateX(360deg);
  }
}
728x90
LIST

'HTML _CSS' 카테고리의 다른 글

Flight Loader  (0) 2022.07.24
Modern CSS Button Glowing Effect  (0) 2022.07.23
Raniy Animation  (0) 2022.07.21
Animated Login Form  (0) 2022.07.20
Mordern Sidebar Menu  (0) 2022.07.19
'HTML _CSS' Related Articles more