45度倾斜的九宫格页面布局模板

Layout of nine palaces with css flex

css, flex, grid

《aframe.js 3d拼图代码详解》作品已被踏得网收录！

第三方库
作品简介 2090
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

const images = [
  "https://images.unsplash.com/photo-1544568100-847a948585b9?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ",
  "https://images.unsplash.com/photo-1517423440428-a5a00ad493e8?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ",
  "https://images.unsplash.com/photo-1510771463146-e89e6e86560e?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ",
  "https://images.unsplash.com/photo-1507146426996-ef05306b995a?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ",
  "https://images.unsplash.com/photo-1530281700549-e82e7bf110d6?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ",
  "https://images.unsplash.com/photo-1548199973-03cce0bbc87b?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ",
  "https://images.unsplash.com/photo-1552053831-71594a27632d?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ",
  "https://images.unsplash.com/photo-1535930891776-0c2dfb7fda1a?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ",
  "https://images.unsplash.com/photo-1504595403659-9088ce801e29?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ"
];

$(document).ready(function() {
  images.forEach(function(image) {
    const template = `<div class="imageWrapper"><img src='${image}' /></div>`;
    $(".imagesWrapper").append(template);
  });
});

编译

CSS

body {
  position: relative;
  margin: 0;
  padding: 0;
  height: 100vh;
  background-color: #222;
  overflow: hidden;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;

.imagesWrapper {
    position: relative;
    transform: translateX(-80px);
    
    .imageWrapper {
      position: absolute;
      height: 150px;
      width: 150px;
      border: 5px solid white;
      background-color: white;
      box-shadow: 0 5px 5px 0 rgba(0, 0, 0, 0.5);
      overflow: hidden;
      background-repeat: no-repeat;
      background-size: cover;
      transition: all 0.5s ease-in-out;
      display: flex;
      align-items: center;
      justify-content: center;
      transform: rotate(45deg);
      margin: auto;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      
      &:nth-child(1) {
        top: -470px;
      }
      
      &:nth-child(2) {
        top: -235px;
        right: -396px;
      }
      
      &:nth-child(3) {
        top: -235px;
        left: -117px;
      }
      
      &:nth-child(4) {
        left: -310px;
      }
      
      &:nth-child(6) {
        right: -633px;
      }
      
      &:nth-child(7) {
        top: 235px;
        right: -396px;
      }
      
      &:nth-child(8) {
        top: 235px;
        left: -117px;
      }
      
      &:nth-child(9) {
        top: 471px;
      }

&:hover {
        transform: scale(1.1) rotate(45deg);
        box-shadow: 0 20px 25px 0 rgba(0, 0, 0, 0.8);
        z-index: 3;

img {
          filter: blur(0) grayscale(0);
        }
      }

img {
        width: 320px;
        height: auto;
        transform: rotate(-45deg);
        filter: blur(2px) grayscale(0.75);
        transition: all 0.5s ease-in-out;
      }
    }
  }

a {
    font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
    position: absolute;
    left: calc(50% - 96px);
    bottom: 0;
    font-style: italic;
    font-size: 12px;
    color: #212121;
    background-color: white;
    padding: 10px 20px;
    border-radius: 5px 5px 0 0;
    box-shadow: 0 5px 15px 0 rgba(0, 0, 0, 0.25);
  }
}

HTML

Layout of nine palaces with css flex

css, flex, grid

编辑器支持Emmet

快捷键

Layout of nine palaces with css flex

css, flex, grid

HTML5九宫格布局可四面八方切换的面板

HTML5 CSS3新奇的响应式皂形网格布局页面模板 | mask-image使用示例

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：