css布局实现一个三维花朵效果代码
代码语言：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 * 6);
}
.triangle:nth-child(33) {
transform: translateX(50px) rotateY(1.2turn) translateZ(calc(var(--d) / 5 * 2)) rotateX(11deg);
width: calc(var(--base-size) / 10 * 4);
height: var(--base-height);
}
.triangle:nth-child(38) {
transform: translateX(50px) rotateY(1.2turn) 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(43) {
transform: translateX(70px) rotateY(1.4turn) translateZ(calc(var(--d) / 5)) rotateX(11deg);
width: calc(var(--base-size) / 10 * 2);
height: var(--base-height);
}
.triangle:nth-child(48) {
transform: translateX(70px) rotateY(1.4turn) translateZ(calc(var(--d) / 5)) rotateX(-127deg);
width: calc(var(--base-size) / 10 * 2);
height: calc(var(--base-height) / 10 * 2);
}
.triangle:nth-child(4) {
transform: rotateY(0.8turn) translateZ(var(--d)) rotateX(-127deg);
}
.triangle:nth-child(9) {
transform: rotateY(0.8turn) translateZ(var(--d)) rotateX(11deg);
}
.triangle:nth-child(14) {
transform: translateX(20px) rotateY(0.9turn) translateZ(calc(var(--d) / 5 * 4)) rotateX(11deg);
width: calc(var(--base-size) / 10 * 8);
height: var(--base-height);
}
.triangle:nth-child(19) {
transform: translateX(20px) rotateY(0.9turn) 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(24) {
transform: translateX(30px) rotateY(1.2turn) translateZ(calc(var(--d) / 5 * 3)) rotateX(11deg);
width: calc(var(--base-size) / 10 * 6);
height: var(--base-height);
}
.triangle:nth-child(29) {
transform: translateX(30px) rotateY(1.2turn) 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(34) {
transform: translateX(50px) rotateY(1.4turn) translateZ(calc(var(--d) / 5 * 2)) rotateX(11deg);
width: calc(var(--base-size) / 10 * 4);
height: var(--base-height);
}
.triangle:nth-child(39) {
transform: translateX(50px) rotateY(1.4turn) 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(44) {
transform: translateX(70px) rotateY(1.6turn) translateZ(calc(var(--d) / 5)) rotateX(11deg);
width: calc(var(--base-size) / 10 * 2);
height: var(--base-height);
}
.triangle:nth-child(49) {
transform: translateX(70px) rotateY(1.6turn) translateZ(calc(var(--d) / 5)) rotateX(-127deg);
width: calc(var(--base-size) / 10 * 2);
height: calc(var(--base-height) / 10 * 2);
}
.triangle:nth-child(5) {
transform: rotateY(1turn) translateZ(var(--d)) rotateX(-127deg);
}
.triangle:nth-child(10) {
transform: rotateY(1turn) translateZ(var(--d)) rotateX(11deg);
}
.triangle:nth-child(15) {
transform: translateX(20px) rotateY(1.1turn) translateZ(calc(var(--d) / 5 * 4)) rotateX(11deg);
width: calc(var(--base-size) / 10 * 8);
height: var(--base-height);
}
.triangle:nth-child(20) {
transform: translateX(20px) rotateY(1.1turn) 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(25) {
transform: translateX(30px) rotateY(1.4turn) translateZ(calc(var(--d) / 5 * 3)) rotateX(11deg);
width: calc(var(--base-size) / 10 * 6);
height: var(--base-height);
}
.triangle:nth-child(30) {
transform: translateX(30px) rotateY(1.4turn) 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(35) {
transform: translateX(50px) rotateY(1.6turn) translateZ(calc(var(--d) / 5 * 2)) rotateX(11deg);
width: calc(var(--base-size) / 10 * 4);
height: var(--base-height);
}
.triangle:nth-child(40) {
transform: translateX(50px) rotateY(1.6turn) 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(45) {
transform: translateX(70px) rotateY(1.8turn) translateZ(calc(var(--d) / 5)) rotateX(11deg);
width: calc(var(--base-size) / 10 * 2);
height: var(--base-height);
}
.triangle:nth-child(50) {
transform: translateX(70px) rotateY(1.8turn) translateZ(calc(var(--d) / 5)) rotateX(-127deg);
width: calc(var(--base-size) / 10 * 2);
height: calc(var(--base-height) / 10 * 2);
}
.stalk > div {
--height: 1000px;
width: 50px;
height: var(--height);
transform-origin: top;
position: absolute;
background-color: green;
clip-path: polygon(0 0, 50% 100%, 100% 0);
--d: 15px;
--d: 15px;
--d: 15px;
}
.stalk > div:nth-child(1) {
transform: translateX(75px) translateY(calc((var(--height) + 50px) * -1)) rotateY(0.3333333333turn) translateZ(14.5px) rotateX(-1.2deg);
}
.stalk > div:nth-child(2) {
transform: translateX(75px) translateY(calc((var(--height) + 50px) * -1)) rotateY(0.6666666667turn) translateZ(14.5px) rotateX(-1.2deg);
}
.stalk > div:nth-child(3) {
transform: translateX(75px) translateY(calc((var(--height) + 50px) * -1)) rotateY(1turn) translateZ(14.5px) rotateX(-1.2deg);
}
</style>
</head>
<body >
<div class="shadow"></div>
<main>
<div class="flower">
<div class="triangles">
<div class="triangle"></div>
<div class="triangle"></div>
<div class="triangle"></div>
<div class="triangle"></div>
<div class="triangle"></div>
<div class="triangle"></div>
<div class="triangle"></div>
<div class="triangle"></div>
<div class="triangle"></div>
<div class="triangle"></div>
<div class="triangle"></div>
<div class="triangle"></div>
<div class="triangle"></div>
<div class="triangle"></div>
<div class="triangle"></div>
<div class="triangle"></div>
<div class="triangle"></div>
<div class="triangle"></div>
<div class="triangle"></div>
<div class="triangle"></div>
<div class="triangle"></div>
<div class="triangle"></div>
<div class="triangle"></div>
<div class="triangle"></div>
<div class="triangle"></div>
<div class="triangle"></div>
<div class="triangle"></div>
<div class="triangle"></div>
<div class="triangle"></div>
<div class="triangle"></div>
<div class="triangle"></div>
<div class="triangle"></div>
<div class="triangle"></div>
<div class="triangle"></div>
<div class="triangle"></div>
<div class="triangle"></div>
<div class="triangle"></div>
<div class="triangle"></div>
<div class="triangle"></div>
<div class="triangle"></div>
<div class="triangle"></div>
<div class="triangle"></div>
<div class="triangle"></div>
<div class="triangle"></div>
<div class="triangle"></div>
<div class="triangle"></div>
<div class="triangle"></div>
<div class="triangle"></div>
<div class="triangle"></div>
<div class="triangle"></div>
</div>
<div class="stalk">
<div></div>
<div></div>
<div></div>
</div>
</div>
<div class="flower">
<div class="triangles">
<div class="triangle"></div>
<div class="triangle"></div>
<div class="triangle"></div>
<div class="triangle"></div>
<div class="triangle"></div>
<div class="triangle"></div>
<div class="triangle"></div>
<div class="triangle"></div>
<div class="triangle"></div>
<div class="triangle"></div>
<div class="triangle"></div>
<div class="triangle"></div>
<div class="triangle"></div>
<div class="triangle"></div>
<div class="triangle"></div>
<div class="triangle"></div>
<div class="triangle"></div>
<div class="triangle"></div>
<div class="triangle"></div>
<div class="triangle"></div>
<div class="triangle"></div>
<div class="triangle"></div>
<div class="triangle"></div>
<div class="triangle"></div>
<div class="triangle"></div>
<div class="triangle"></div>
<div class="triangle"></div>
<div class="triangle"></div>
<div class="triangle"></div>
<div class="triangle"></div>
<div class="triangle"></div>
<div class="triangle"></div>
<div class="triangle"></div>
<div class="triangle"></div>
<div class="triangle"></div>
<div class="triangle"></div>
<div class="triangle"></div>
<div class="triangle"></div>
<div class="triangle"></div>
<div class="triangle"></div>
<div class="triangle"></div>
<div class="triangle"></div>
<div class="triangle"></div>
<div class="triangle"></div>
<div class="triangle"></div>
<div class="triangle"></div>
<div class="triangle"></div>
<div class="triangle"></div>
<div class="triangle"></div>
<div class="triangle"></div>
</div>
<div class="stalk">
<div></div>
<div></div>
<div></div>
</div>
</div>
<div class="flower">
<div class="triangles">
<div class="triangle"></div>
<div class="triangle"></div>
<div class="triangle"></div>
<div class="triangle"></div>
<div class="triangle"></div>
<div class="triangle"></div>
<div class="triangle"></div>
<div class="triangle"></div>
<div class="triangle"></div>
<div class="triangle"></div>
<div class="triangle"></div>
<div class="triangle"></div>
<div class="triangle"></div>
<div class="triangle"></div>
<div class="triangle"></div>
<div class="triangle"></div>
<div class="triangle"></div>
<div class="triangle"></div>
<div class="triangle"></div>
<div class="triangle"></div>
<div class="triangle"></div>
<div class="triangle"></div>
<div class="triangle"></div>
<div class="triangle"></div>
<div class="triangle"></div>
<div class="triangle"></div>
<div class="triangle"></div>
<div class="triangle"></div>
<div class="triangle"></div>
<div class="triangle"></div>
<div class="triangle"></div>
<div class="triangle"></div>
<div class="triangle"></div>
<div class="triangle"></div>
<div class="triangle"></div>
<div class="triangle"></div>
<div class="triangle"></div>
<div class="triangle"></div>
<div class="triangle"></div>
<div class="triangle"></div>
<div class="triangle"></div>
<div class="triangle"></div>
<div class="triangle"></div>
<div class="triangle"></div>
<div class="triangle"></div>
<div class="triangle"></div>
<div class="triangle"></div>
<div class="triangle"></div>
<div class="triangle"></div>
<div class="triangle"></div>
</div>
<div class="stalk">
<div></div>
<div></div>
<div></div>
</div>
</div>
<div class="flower">
<div class="triangles">
<div class="triangle"></div>
<div class="triangle"></div>
<div class="triangle"></div>
<div class="triangle"></div>
<div class="triangle"></div>
<div class="triangle"></div>
<div class="triangle"></div>
<div class="triangle"></div>
<div class="triangle"></div>
<div class="triangle"></div>
<div class="triangle"></div>
<div class="triangle"></div>
<div class="triangle"></div>
<div class="triangle"></div>
<div class="triangle"></div>
<div class="triangle"></div>
<div class="triangle"></div>
<div class="triangle"></div>
<div class="tr.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
Html代码库
Python代码库
Java代码库
Php代码库
Phpcli代码库
Golang代码库
C#代码库
Nodejs代码库
C代码库
C++代码库
Sql代码库
R代码库
Rust代码库
Ruby代码库
Dart代码库
Vb代码库
D代码库
F#代码库
Typescript代码库
Coffeescript代码库
Julia代码库
Kotlin代码库
Perl代码库
Groovy代码库
Lua代码库
Vala代码库
Ocaml代码库
Assembly代码库
Objectc代码库
Scala代码库
Erlang代码库
Pascal代码库
Swift代码库
Fortran代码库
Bash代码库
Clojure代码库
Ada代码库
Elixir代码库
Cobol代码库
Haskell代码库
Nim代码库
Racket代码库
Lisp代码库
网友评论0