css基本3d操作布局示例代码-html代码-BFW代码库

css基本3d操作布局示例代码

代码语言：html

代码描述：css基本3d操作布局示例代码，通过transform、preserve-3d等css三维属性实现三维操作dom元素示例代码。

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

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

<head>
  <meta charset="UTF-8">
  

<style>
html {
  height:100dvh;  
} 

body {
  min-height:100%;
  margin:0;
}

body {
  padding:2em;
  
  font-family:saira, sans-serif;
	background-color: #ccc;
  
  display:grid;
  grid-template-columns:repeat(auto-fit, min(100%, 25em));
/*   place-items:start center; */
  place-content:start center;
  grid-gap:2em;
}

ul {
  margin:0; 
  padding:0;
  list-style:none;
  
  position:relative;
  width:100%;
  aspect-ratio:2;
  
  display:grid;
  place-items:center;
  
  background:#fff9;
}

ul::before {
  content: attr(data-title);
  position:absolute;
  right:.5em;
  bottom:0;
  font-size:.75em;
}

li {
  height:40%;
  aspect-ratio:1;
  
  display:flex;
  justify-content:center;
  align-items:center;
  
  background-image:linear-gradient(in oklch, deeppink, dodgerblue);
  border-radius:5%;
}

li:nth-of-type(even) {
  background-image:linear-gradient(in oklch, dodgerblue, lime);
}

li:nth-of-type(1) { --i:1; }
li:nth-of-type(2) { --i:2; }
li:nth-of-type(3) { --i:3; }
li:nth-of-type(4) { --i:4; }
li:nth-of-type(5) { --i:5; }
li:nth-of-type(6) { --i:6; }
li:nth-of-type(7) { --i:7; }
li:nth-of-type(8) { --i:8; }
li:nth-of-type(9) { --i:9; }
li:nth-of-type(10) { --i:10; }
li:nth-of-type(11) { --i:11; }
li:nth-of-type(12) { --i:12; }





/**********************************/
/* [data-title="own perspective"] */
/**********************************/

ul[data-title="own perspective"] {
  grid-template-columns:1fr 1fr;
}

ul[data-title="own perspective"] li:first-child {
  /* 1. transform met perspective */
  transform:perspective(20em) rotateX(45deg);
}

ul[data-title="own perspective"] li:last-child {
  /* 1. transform met perspective */
  transform:perspective(20em) rotateX(45deg);
}





/*************************************/
/* [data-title="parent perspective"] */
/*************************************/

ul[data-title="parent perspective"] {
  grid-template-columns:1fr 1fr;
  /* 3. transform zonder perspective */
  transform:perspective(100em) rotateY(75deg);
  
  /* 2. perspective */
  /* 3. preserve-3D */
  perspective:20em; 
  transform-style:preserve-3d;
}

ul[data-title="parent perspective"] li:first-child {
  /* 1. transform zonder perspective */
  transform:rotateX(45deg);
  /* 4. transform-orgin */
  transform-origin:center 75%;
}

ul[data-title="parent perspective"] li:last-child {
  /* 1. transform zonder perspective .........完整代码请登录后点击上方下载按钮下载查看