css布局实现一个三维花朵效果代码-html代码-BFW代码库

代码语言：html
代码描述：css布局实现一个三维花朵效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

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

<head>

  <meta charset="UTF-8">
  

  
  
  
<style>
:root {
  --base-size: 250px;
  --base-height: 173px;
}

* {
  padding: 0;
  margin: 0 auto;
  box-sizing: border-box;
}

body {
  background-color: #7a7b89;
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  perspective: 600px;
  overflow: hidden;
}

main {
  transform-style: preserve-3d;
  transform: translateX(-400px) translateZ(-600px);
}

main > .flower {
  transform-style: preserve-3d;
  position: relative;
  width: 500px;
  background-color: olive;
  transform-origin: 90% center;
  --d: 138px;
  --d: 138px;
  --d: 138px;
  --d: 138px;
  --d: 138px;
  --d: 138px;
  --d: 138px;
  --d: 138px;
  --d: 138px;
  --d: 138px;
  --d: 138px;
  --d: 138px;
  --d: 138px;
}
main > .flower:nth-child(1) {
  transform-origin: 90% center;
  transform: rotateY(0.125turn) rotateX(180deg) translateX(-100px) rotateZ(30deg);
}
main > .flower:nth-child(2) {
  transform-origin: 90% center;
  transform: rotateY(0.25turn) rotateX(180deg) translateX(-100px) rotateZ(30deg);
}
main > .flower:nth-child(3) {
  transform-origin: 90% center;
  transform: rotateY(0.375turn) rotateX(180deg) translateX(-100px) rotateZ(30deg);
}
main > .flower:nth-child(4) {
  transform-origin: 90% center;
  transform: rotateY(0.5turn) rotateX(180deg) translateX(-100px) rotateZ(30deg);
}
main > .flower:nth-child(5) {
  transform-origin: 90% center;
  transform: rotateY(0.625turn) rotateX(180deg) translateX(-100px) rotateZ(30deg);
}
main > .flower:nth-child(6) {
  transform-origin: 90% center;
  transform: rotateY(0.75turn) rotateX(180deg) translateX(-100px) rotateZ(30deg);
}
main > .flower:nth-child(7) {
  transform-origin: 90% center;
  transform: rotateY(0.875turn) rotateX(180deg) translateX(-100px) rotateZ(30deg);
}
main > .flower:nth-child(8) {
  transform-origin: 90% center;
  transform: rotateY(1turn) rotateX(180deg) translateX(-100px) rotateZ(30deg);
}
main > .flower:nth-child(9) {
  transform: rotateY(0.3333333333turn) translateZ(-50px) rotateX(180deg) translateX(150px) translateY(100px) rotateZ(15deg);
}
main > .flower:nth-child(10) {
  transform: rotateY(0.6666666667turn) translateZ(-50px) rotateX(180deg) translateX(150px) translateY(100px) rotateZ(15deg);
}
main > .flower:nth-child(11) {
  transform: rotateY(1turn) translateZ(-50px) rotateX(180deg) translateX(150px) translateY(100px) rotateZ(15deg);
}
main > .flower:nth-child(12) {
  transform: rotateY(1.3333333333turn) translateZ(-50px) rotateX(180deg) translateX(150px) translateY(100px) rotateZ(15deg);
}
main > .flower:nth-child(13) {
  transform: rotateY(1.6666666667turn) translateZ(-50px) rotateX(180deg) translateX(150px) translateY(100px) rotateZ(15deg);
}

.triangle {
  transform-origin: top;
  position: absolute;
  width: var(--base-size);
  height: var(--base-height);
  clip-path: polygon(0 0, 50% 100%, 100% 0);
  background: linear-gradient(0deg, #c32222 0%, #7a0000 100%);
  --d: 150px;
  --d: 150px;
  --d: 150px;
  --d: 150px;
  --d: 150px;
}
.triangle:nth-child(1) {
  transform: rotateY(0.2turn) translateZ(var(--d)) rotateX(-127deg);
}
.triangle:nth-child(6) {
  transform: rotateY(0.2turn) translateZ(var(--d)) rotateX(11deg);
}
.triangle:nth-child(11) {
  transform: translateX(20px) rotateY(0.3turn) translateZ(calc(var(--d) / 5 * 4)) rotateX(11deg);
  width: calc(var(--base-size) / 10 * 8);
  height: var(--base-height);
}
.triangle:nth-child(16) {
  transform: translateX(20px) rotateY(0.3turn) translateZ(calc(var(--d) / 5 * 4)) rotateX(-127deg);
  width: calc(var(--base-size) / 10 * 8);
  height: calc(var(--base-height)/ 10 * 8);
}
.triangle:nth-child(21) {
  transform: translateX(30px) rotateY(0.6turn) translateZ(calc(var(--d) / 5 * 3)) rotateX(11deg);
  width: calc(var(--base-size) / 10 * 6);
  height: var(--base-height);
}
.triangle:nth-child(26) {
  transform: translateX(30px) rotateY(0.6turn) translateZ(calc(var(--d) / 5 * 3)) rotateX(-127deg);
  width: calc(var(--base-size) / 10 * 6);
  height: calc(var(--base-height) / 10 * 6);
}
.triangle:nth-child(31) {
  transform: translateX(50px) rotateY(0.8turn) translateZ(calc(var(--d) / 5 * 2)) rotateX(11deg);
  width: calc(var(--base-size) / 10 * 4);
  height: var(--base-height);
}
.triangle:nth-child(36) {
  transform: translateX(50px) rotateY(0.8turn) translateZ(calc(var(--d) / 5 * 2)) rotateX(-127deg);
  width: calc(var(--base-size) / 10 * 4);
  height: calc(var(--base-height) / 10 * 4);
}
.triangle:nth-child(41) {
  transform: translateX(70px) rotateY(1turn) translateZ(calc(var(--d) / 5)) rotateX(11deg);
  width: calc(var(--base-size) / 10 * 2);
  height: var(--base-height);
}
.triangle:nth-child(46) {
  transform: translateX(70px) rotateY(1turn) translateZ(calc(var(--d) / 5)) rotateX(-127deg);
  width: calc(var(--base-size) / 10 * 2);
  height: calc(var(--base-height) / 10 * 2);
}
.triangle:nth-child(2) {
  transform: rotateY(0.4turn) translateZ(var(--d)) rotateX(-127deg);
}
.triangle:nth-child(7) {
  transform: rotateY(0.4turn) translateZ(var(--d)) rotateX(11deg);
}
.triangle:nth-child(12) {
  transform: translateX(20px) rotateY(0.5turn) translateZ(calc(var(--d) / 5 * 4)) rotateX(11deg);
  width: calc(var(--base-size) / 10 * 8);
  height: var(--base-height);
}
.triangle:nth-child(17) {
  transform: translateX(20px) rotateY(0.5turn) translateZ(calc(var(--d) / 5 * 4)) rotateX(-127deg);
  width: calc(var(--base-size) / 10 * 8);
  height: calc(var(--base-height)/ 10 * 8);
}
.triangle:nth-child(22) {
  transform: translateX(30px) rotateY(0.8turn) translateZ(calc(var(--d) / 5 * 3)) rotateX(11deg);
  width: calc(var(--base-size) / 10 * 6);
  height: var(--base-height);
}
.triangle:nth-child(27) {
  transform: translateX(30px) rotateY(0.8turn) translateZ(calc(var(--d) / 5 * 3)) rotateX(-127deg);
  width: calc(var(--base-size) / 10 * 6);
  height: calc(var(--base-height) / 10 * 6);
}
.triangle:nth-child(32) {
  transform: translateX(50px) rotateY(1turn) translateZ(calc(var(--d) / 5 * 2)) rotateX(11deg);
  width: calc(var(--base-size) / 10 * 4);
  height: var(--base-height);
}
.triangle:nth-child(37) {
  transform: translateX(50px) rotateY(1turn) translateZ(calc(var(--d) / 5 * 2)) rotateX(-127deg);
  width: calc(var(--base-size) / 10 * 4);
  height: calc(var(--base-height) / 10 * 4);
}
.triangle:nth-child(42) {
  transform: translateX(70px) rotateY(1.2turn) translateZ(calc(var(--d) / 5)) rotateX(11deg);
  width: calc(var(--base-size) / 10 * 2);
  height: var(--base-height);
}
.triangle:nth-child(47) {
  transform: translateX(70px) rotateY(1.2turn) translateZ(calc(var(--d) / 5)) rotateX(-127deg);
  width: calc(var(--base-size) / 10 * 2);
  height: calc(var(--base-height) / 10 * 2);
}
.triangle:nth-child(3) {
  transform: rotateY(0.6turn) translateZ(var(--d)) rotateX(-127deg);
}
.triangle:nth-child(8) {
  transform: rotateY(0.6turn) translateZ(var(--d)) rotateX(11deg);
}
.triangle:nth-child(13) {
  transform: translateX(20px) rotateY(0.7turn) translateZ(calc(var(--d) / 5 * 4)) rotateX(11deg);
  width: calc(var(--base-size) / 10 * 8);
  height: var(--base-height);
}
.triangle:nth-child(18) {
  transform: translateX(20px) rotateY(0.7turn) translateZ(calc(var(--d) / 5 * 4)) rotateX(-127deg);
  width: calc(var(--base-size) / 10 * 8);
  height: calc(var(--base-height)/ 10 * 8);
}
.triangle:nth-child(23) {
  transform: translateX(30px) rotateY(1turn) translateZ(calc(var(--d) / 5 * 3)) rotateX(11deg);
  width: calc(var(--base-size) / 10 * 6);
  height: var(--base-height);
}
.triangle:nth-child(28) {
  transform: translateX(30px) rotateY(1turn) translateZ(calc(var(--d) / 5 * 3)) rotateX(-127deg);
  width: calc(var(--base-size) / 10 * 6);
  height: calc(var(--base-height) / 10 .........完整代码请登录后点击上方下载按钮下载查看