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

代码语言：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 */
  transform:rotateX(45deg);
}





/******************************/
/* [data-title="preserve-3D"] */
/******************************/

ul[data-title="preserve-3D"] {
  perspective:50em; 
  /* 2. preserve-3D */
  transform-style:preserve-3d;
}

ul[data-title="preserve-3D"] li {
  grid-area:1/1;
  /* 1. start animation */
  animation:ani-preserve-3D 10s calc(10s/-12*var(--i)) infinite linear;
}

@keyframes ani-preserve-3D {
  0%{ transform:rotateY(0turn) translatez(min(50vw, 13em)); }
  100%{ transform:rotateY(1turn) translatez(min(50vw, 13em)); }
}





/***********************************/
/* [data-title="transform-origin"] */
/***********************************/

ul[data-title="transform-origin"] {
  perspective:50em; 
  transform-style:preserve-3d;
}

ul[data-title="transform-origin"] li {
  /* 1. start animation */
  animation:ani-transform-origin 4s infinite linear;
  
  /* 2. transform-orgin */
  /* 3. transform-orgin */
  transform-origin:left center;
  
  transform-origin:center center -8em;
}

@keyframes ani-transform-origin {
  0%{ transform:rotateY(0turn); }
  100%{ transform:rotateY(1turn); }
}





/*************************************/
/* [data-title="transforms-chainen"] */
/****.........完整代码请登录后点击上方下载按钮下载查看