비전공자 개발일기

3D Cube Slider 본문

HTML _CSS

3D Cube Slider

HiroDaegu 2023. 1. 17. 00:03
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>Document</title>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <div class="gallery">
        <img src="https://picsum.photos/id/174/400/400" alt="a hot air balloon">
        <img src="https://picsum.photos/id/175/400/400" alt="a clock">
        <img src="https://picsum.photos/id/188/400/400" alt="a sky photo of an old city">
        <img src="https://picsum.photos/id/211/400/400" alt="a small boat">
        <img src="https://picsum.photos/id/22/400/400" alt="a lonely man :(">
        <img src="https://picsum.photos/id/28/400/400" alt="a forest">
    </div>
</body>

</html>
.gallery {
    --s: 250px; /* the size */
    
    display: grid;
    transform-style: preserve-3d;
    --_p: perspective(calc(2.5*var(--s)));
    animation: r 9s infinite cubic-bezier(.5,-0.5,.5,1.5);
  }
  .gallery img {
    grid-area: 1/1;
    width: var(--s);
    aspect-ratio: 1;
    object-fit: cover;
    transform: var(--_t,) translateZ(calc(var(--s)/2));
  }
  .gallery img:nth-child(2) {--_t: rotateX(-90deg)}
  .gallery img:nth-child(3) {--_t: rotateY( 90deg)}
  .gallery img:nth-child(4) {--_t: rotateX(180deg) rotate( 90deg)}
  .gallery img:nth-child(5) {--_t: rotateX( 90deg)}
  .gallery img:nth-child(6) {--_t: rotateY(-90deg)}
  
  @keyframes r {
    0%,3%   {transform: var(--_p) rotate3d(0, 0, 0, 0deg)}
    14%,19% {transform: var(--_p) rotate3d(-1, 1, 0, 180deg)}
    31%,36% {transform: var(--_p) rotate3d(0, -1, 0, 90deg)}
    47%,52% {transform: var(--_p) rotate3d(1, 0, 0, 90deg)}
    64%,69% {transform: var(--_p) rotate3d(1, 0, 0, -90deg)}
    81%,86% {transform: var(--_p) rotate3d(0, 1, 0, 90deg)}
    97%,100%{transform: var(--_p) rotate3d(0, 0, 0, 0deg)}
  }
  
  
  body {
    margin: 0;
    min-height: 100vh;
    display: grid;
    place-content: center;
    background: #556270;
    animation: b 9s infinite;
  }
  
  @keyframes b {
    0%,3%   {background: #774F38}
    14%,19% {background: #C5E0DC}
    31%,36% {background: #036564}
    45%,55% {background: #B38184}
    64%,69% {background: #424254}
    81%,86% {background: #4DBCE9}
    97%,to  {background: #774F38}
  }
728x90
LIST

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

Animated Working Analog Clock  (0) 2023.01.20
Responsive Tabs  (0) 2023.01.19
Stylish Checkbox  (0) 2023.01.15
Animated Instagram Logo  (0) 2023.01.14
Animated Service Section Card UI  (0) 2023.01.13
'HTML _CSS' Related Articles more