div+css实现三维旋转立体盒子幻灯片代码-html代码-BFW代码库

div+css实现三维旋转立体盒子幻灯片代码

代码语言：html

所属分类：幻灯片

代码描述：div+css实现三维旋转立体盒子幻灯片代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开


<!DOCTYPE html>
<html lang="en" >

<head>

  <meta charset="UTF-8">

  
  
  
<style>
.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: #C5E0.........完整代码请登录后点击上方下载按钮下载查看