div+css实现阶梯立方体图片墙效果代码-html代码-BFW代码库

div+css实现阶梯立方体图片墙效果代码

代码语言：html

代码描述：div+css实现阶梯立方体图片墙效果代码

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


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

<head>

  <meta charset="UTF-8">
  

  
  
  
<style>
body {
  background-color: #444;
  height: 100vh;
  margin: 0;
  display: grid;
  place-items: center;
  background-image: url('data:image/svg+xml,%3Csvg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"%3E%3Cpath d="M0 0h16v2h-6v6h6v8H8v-6H2v6H0V0zm4 4h2v2H4V4zm8 8h2v2h-2v-2zm-8 0h2v2H4v-2zm8-8h2v2h-2V4z" fill="black" fill-opacity="0.15" fill-rule="evenodd"/%3E%3C/svg%3E');
}

.container .row {
  perspective: 20000px;
  display: flex;
  justify-items: flex-start;
}
.container .row:nth-child(odd) {
  margin-left: 73px;
}
.container .row .item {
  position: relative;
  transform-style: preserve-3d;
  transform-origin: 0%;
  transform: rotateX(60deg) rotateY(0deg) rotateZ(-45deg);
  background-color: #fff;
  width: 100px;
  height: 100px;
  float: left;
  margin: 13.5px 23.5px;
  box-sizing: border-box;
  transition: transform 400ms cubic-bezier(0.47, 0.25, 0.25, 1.21);
  background-size: cover;
  background-position: center;
  transform-origin: center;
}
.container .row .item:hover {
  transform: translateY(-3px) rotateX(60deg) rotateY(0) rotateZ(-45deg);
}
.container .row .item::before, .container .row .item::after {
  position: absolute;
  width: 100px;
  height: 100px;
  transform-style: preserve-3d;
  box-sizing: border-box;
  background-color: #fff;
  background-size: inherit;
  background-position: inherit;
}
.container .row .item::before {
  top: -50%;
  left: 0;
  content: "";
  transform: rotateY(-90deg) rotateZ(90deg) translate3d(52px, 50px, 54px);
}
.container .row .item::after {
  top: 50%;
  left: 0;
  content: "";
  transform-origin: 0%;
  transform: rotateX(-90deg) translate3d(2px, 54px, 0);
}
.container .row .item.t1 {
  background-image: url(//repo.bfw.wiki/bfwrepo/image/5e62ef20b92ee.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_100,h_100,/quality,q_90);
}
.container .row .item.t1::aft.........完整代码请登录后点击上方下载按钮下载查看