css实现三维3d卡车效果代码
代码语言：html
所属分类：布局界面
代码描述：css实现三维3d卡车效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
*,
*::before,
*::after {
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
body {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
min-height: 100vh;
overflow: hidden;
padding-bottom: 5.5rem;
transform: scale3d(1, 1.1, 1);
font-size: 1rem;
line-height: 1.6;
-webkit-tap-highlight-color: transparent;
background-color: #4394F5;
}
.face {
position: absolute;
}
.cube {
width: 29vw;
height: 13.5vw;
-webkit-transform: perspective(1000000px) rotateX(70deg) rotateZ(-45deg);
transform: perspective(1000000px) rotateX(70deg) rotateZ(-45deg);
top: 80%;
left: -50%;
/* package cubes */
}
.cube.front {
width: 29vw;
height: 13.5vw;
-webkit-transform-origin: bottom left;
-ms-transform-origin: bottom left;
transform-origin: bottom left;
-webkit-transform: rotateX(-90deg) translateZ(2vw);
transform: rotateX(-90deg) translateZ(2vw);
}
.cube.back {
width: 29vw;
height: 13.5vw;
-webkit-transform-origin: top left;
-ms-transform-origin: top left;
transform-origin: top left;
-webkit-transform: rotateX(-90deg) rotateY(180deg) translateX(-29vw) translateY(-13.5vw);
transform: rotateX(-90deg) rotateY(180deg) translateX(-29vw) translateY(-13.5vw);
}
.cube.right {
width: 15.5vw;
height: 13.5vw;
-webkit-transform-origin: top left;
-ms-transform-origin: top left;
transform-origin: top left;
-webkit-transform: rotateY(90deg) rotateZ(-90deg) translateZ(29vw) translateX(-15.5vw) translateY(-13.5vw);
transform: rotateY(90deg) rotateZ(-90deg) translateZ(29vw) translateX(-15.5vw) translateY(-13.5vw);
}
.cube.left {
width: 15.5vw;
height: 13.5vw;
-webkit-transform-origin: top left;
-ms-transform-origin: top left;
transform-origin: top left;
-webkit-transform: rotateY(-90deg) rotateZ(90deg) translateY(-13.5vw);
transform: rotateY(-90deg) rotateZ(90deg) translateY(-13.5vw);
}
.cube.bottom {
width: 29vw;
height: 15.5vw;
-webkit-transform-origin: top left;
-ms-transform-origin: top left;
transform-origin: top left;
-webkit-transform: rotateY(180deg) translateX(-29vw);
transform: rotateY(180deg) translateX(-29vw);
}
.cube.top {
width: 29vw;
height: 15.5vw;
-webkit-transform-origin: top left;
-ms-transform-origin: top left;
transform-origin: top left;
-webkit-transform: translateZ(13.5vw);
transform: translateZ(13.5vw);
}
.cube.front, .cube.back, .cube.right, .cube.left, .cube.top, .cube.bottom {
background-color: #f06;
background-color: #13D1C6;
background-color: #fff;
}
.cube .bottom.hidden {
background: blue;
background: rgba(43, 103, 177, 0.99);
transform: translateZ(-10vw) rotateZ(-2deg);
left: -10.75vw;
top: -2.5vw;
width: 145%;
height: 130%;
}
.cube.left {
background: rgba(250, 250, 250, 0.98);
background: #e3e0eb;
background: #DCE4F3;
background: #CFDAF2;
background: #bfcae0;
background: #cad4e7;
background: #d5dff1;
}
.cube.top {
background: white;
background: #F6F7F7;
background: #FBFBFB;
}
.cube.front {
background: transparent;
}
.cube.bottom, .cube.back {
background: #1F618D;
background: #174CB6;
background: #3943BB;
background: #1F349E;
background: #3923AF;
}
.cube.right {
background: #185279;
background: #2f39aa;
background: #2e1b97;
background: #251777;
}
.cube .cube-two {
width: 29vw;
height: 13.5vw;
-webkit-transform: translateZ(3.6vw) perspective(1000px) rotateY(2deg) rotateZ(-1.5deg);
transform: translateZ(3.6vw) perspective(1000px) rotateY(2deg) rotateZ(-1.5deg);
top: 110.75%;
left: -5%;
}
.cube .cube-two.front {
width: 4.5vw;
height: 4vw;
-webkit-transform-origin: bottom left;
-ms-transform-origin: bottom left;
transform-origin: bottom left;
-webkit-transform: rotateX(-90deg) translateZ(1vw);
transform: rotateX(-90deg) translateZ(1vw);
}
.cube .cube-two.back {
width: 4.5vw;
height: 4vw;
-webkit-transform-origin: top left;
-ms-transform-origin: top left;
transform-origin: top left;
-webkit-transform: rotateX(-90deg) rotateY(180deg) translateX(-4.5vw) translateY(-4vw);
transform: rotateX(-90deg) rotateY(180deg) translateX(-4.5vw) translateY(-4vw);
}
.cube .cube-two.right {
width: 5vw;
height: 4vw;
-webkit-transform-origin: top left;
-ms-transform-origin: top left;
transform-origin: top left;
-webkit-transform: rotateY(90deg) rotateZ(-90deg) translateZ(4.5vw) translateX(-5vw) translateY(-4vw);
transform: rotateY(90deg) rotateZ(-90deg) translateZ(4.5vw) translateX(-5vw) translateY(-4vw);
}
.cube .cube-two.left {
width: 5vw;
height: 4vw;
-webkit-transform-origin: top left;
-ms-transform-origin: top left;
transform-origin: top left;
-webkit-transform: rotateY(-90deg) rotateZ(90deg) translateY(-4vw);
transform: rotateY(-90deg) rotateZ(90deg) translateY(-4vw);
}
.cube .cube-two.bottom {
width: 4.5vw;
height: 5vw;
-webkit-transform-origin: top left;
-ms-transform-origin: top left;
transform-origin: top left;
-webkit-transform: rotateY(180deg) translateX(-4.5vw);
transform: rotateY(180deg) translateX(-4.5vw);
}
.cube .cube-two.top {
width: 4.5vw;
height: 5vw;
-webkit-transform-origin: top left;
-ms-transform-origin: top left;
transform-origin: top left;
-webkit-transform: translateZ(4vw);
transform: translateZ(4vw);
}
.cube .cube-two.front, .cube .cube-two.back, .cube .cube-two.right, .cube .cube-two.left, .cube .cube-two.top, .cube .cube-two.bottom {
background: #48C9B0;
}
.cube .cube-two.top {
background: #49d8bb;
background: #4AE8BD;
background: #5bf7cd;
}
.cube .cube-two.front {
background: #40bea5;
}
.cube .cube-two.left {
background: #39aa93;
}
.cube .cube-three {
width: 29vw;
height: 13.5vw;
-webkit-transform: translateZ(4vw) perspective(1000px) rotateY(2deg) rotateZ(-1.5deg);
transform: translateZ(4vw) perspective(1000px) rotateY(2deg) rotateZ(-1.5deg);
top: 18%;
left: 24%;
}
.cube .cube-three.front {
width: 4.5vw;
height: 4vw;
-webkit-transform-origin: bottom left;
-ms-transform-origin: bottom left;
transform-origin: bottom left;
-webkit-transform: rotateX(-90deg) translateZ(1vw);
transform: rotateX(-90deg) translateZ(1vw);
}
.cube .cube-three.back {
width: 4.5vw;
height: 4vw;
-webkit-transform-origin: top left;
-ms-transform-origin: top left;
transform-origin: top left;
-webkit-transform: rotateX(-90deg) rotateY(180deg) translateX(-4.5vw) translateY(-4vw);
transform: rotateX(-90deg) rotateY(180deg) translateX(-4.5vw) translateY(-4vw);
}
.cube .cube-three.right {
width: 5vw;
height: 4vw;
-webkit-transform-origin: top left;
-ms-transform-origin: top left;
transform-origin: top left;
-webkit-transform: rotateY(90deg) rotateZ(-90deg) translateZ(4.5vw) translateX(-5vw) translateY(-4vw);
transform: rotateY(90deg) rotateZ(-90deg) translateZ(4.5vw) translateX(-5vw) translateY(-4vw);
}
.cube .cube-three.left {
width: 5vw;
height: 4vw;
-webkit-transform-origin: top left;
-ms-transform-origin: top left;
transform-origin: top left;
-webkit-transform: rotateY(-90deg) rotateZ(90deg) translateY(-4vw);
transform: rotateY(-90deg) rotateZ(90deg) translateY(-4vw);
}
.cube .cube-three.bottom {
width: 4.5vw;
height: 5vw;
-webkit-transform-origin: top left;
-ms-transform-origin: top left;
transform-origin: top left;
-webkit-transform: rotateY(180deg) translateX(-4.5vw);
transform: rotateY(180deg) translateX(-4.5vw);
}
.cube .cube-three.top {
width: 4.5vw;
height: 5vw;
-webkit-transform-origin: top left;
-ms-transform-origin: top left;
transform-origin: top left;
-webkit-transform: translateZ(4vw);
transform: translateZ(4vw);
}
.cube .cube-three.front, .cube .cube-three.back, .cube .cube-three.right, .cube .cube-three.left, .cube .cube-three.top, .cube .cube-three.bottom {
background: #48C9B0;
}
.cube .cube-three.top {
background: #49d8bb;
background: #4AE8BD;
background: #5bf7cd;
}
.cube .cube-three.front {
background: #40bea5;
}
.cube .cube-three.left {
background: #39aa93;
}
.cube .loading-cube {
width: 4.75vw;
height: 4vw;
-webkit-transform: perspective(1000px) rotateY(0deg) rotateZ(-1.5deg);
transform: perspective(1000px) rotateY(0deg) rotateZ(-1.5deg);
top: -175%;
left: 161%;
}
.cube .loading-cube.front {
width: 4.75vw;
height: 4vw;
-webkit-transform-origin: bottom left;
-ms-transform-origin: bottom left;
transform-origin: bottom left;
-webkit-transform: rotateX(-90deg) translateZ(1vw);
transform: rotateX(-90deg) translateZ(1vw);
}
.cube .loading-cube.back {
width: 4.75vw;
height: 4vw;
-webkit-transform-origin: top left;
-ms-transform-origin: top left;
transform-origin: top left;
-webkit-transform: rotateX(-90deg) rotateY(180deg) translateX(-4.75vw) translateY(-4vw);
transform: rotateX(-90deg) rotateY(180deg) translateX(-4.75vw) translateY(-4vw);
}
.cube .loading-cube.right {
width: 5vw;
height: 4vw;
-webkit-transform-origin: top left;
-ms-transform-origin: top left;
transform-origin: top left;
-webkit-transform: rotateY(90deg) rotateZ(-90deg) translateZ(4.75vw) translateX(-5vw) translateY(-4vw);
transform: rotateY(90deg) rotateZ(-90deg) translateZ(4.75vw) translateX(-5vw) translateY(-4vw);
}
.cube .loading-cube.left {
width: 5vw;
height: 4vw;
-webkit-transform-origin: top left;
-ms-transform-origin: top left;
transform-origin: top left;
-webkit-transform: rotateY(-90deg) rotateZ(90deg) translateY(-4vw);
transform: rotateY(-90deg) rotateZ(90deg) translateY(-4vw);
}
.cube .loading-cube.bottom {
width: 4.75vw;
height: 5vw;
-webkit-transform-origin: top left;
-ms-transform-origin: top left;
transform-origin: top left;
-webkit-transform: rotateY(180deg) translateX(-4.75vw);
transform: rotateY(180deg) translateX(-4.75vw);
}
.cube .loading-cube.top {
width: 4.75vw;
height: 5vw;
-webkit-transform-origin: top left;
-ms-transform-origin: top left;
transform-origin: top left;
-webkit-transform: translateZ(4vw);
transform: translateZ(4vw);
}
.cube .loading-cube.front, .cube .loading-cube.back, .cube .loading-cube.right, .cube .loading-cube.left, .cube .loading-cube.top, .cube .loading-cube.bottom {
background: #48C9B0;
background-color: #36E4C2;
background: #54E6D9;
background: #51DED1;
}
.cube .loading-cube.top {
background: #49d8bb;
background: #75EED3;
background: #51E5BC;
background: #4AE8BD;
background: #4ce9bf;
background: #4eecc2;
background: #5bf7cd;
}
.cube .loading-cube.front {
background: #40bea5;
}
.cube .loading-cube.left {
background: #39aa93;
}
.cube .loading-cube-two {
width: 4.75vw;
height: 4vw;
left: 156%;
top: -400%;
}
.cube .loading-cube-two.front {
width: 4.75vw;
height: 4vw;
-webkit-transform-origin: bottom left;
-ms-transform-origin: bottom left;
transform-origin: bottom left;
-webkit-transform: rotateX(-90deg) translateZ(1vw);
transform: rotateX(-90deg) translateZ(1vw);
}
.cube .loading-cube-two.back {
width: 4.75vw;
height: 4vw;
-webkit-transform-origin: top left;
-ms-transform-origin: top left;
transform-origin: top left;
-webkit-transform: rotateX(-90deg) rotateY(180deg) translateX(-4.75vw) translateY(-4vw);
transform: rotateX(-90deg) rotateY(180deg) translateX(-4.75vw) translateY(-4vw);
}
.cube .loading-cube-two.right {
width: 5vw;
height: 4vw;
-webkit-transform-origin: top left;
-ms-transform-origin: top left;
transform-origin: top left;
-webkit-transform: rotateY(90deg) rotateZ(-90deg) translateZ(4.75vw) translateX(-5vw) translateY(-4vw);
transform: rotateY(90deg) rotateZ(-90deg) translateZ(4.75vw) translateX(-5vw) translateY(-4vw);
}
.cube .loading-cube-two.left {
width: 5vw;
height: 4vw;
-webkit-transform-origin: top left;
-ms-transform-origin: top left;
transform-origin: top left;
-webkit-transform: rotateY(-90deg) rotateZ(90deg) translateY(-4vw);
transform: rotateY(-90deg) rotateZ(90deg) translateY(-4vw);
}
.cube .loading-cube-two.bottom {
width: 4.75vw;
height: 5vw;
-webkit-transform-origin: top left;
-ms-transform-origin: top left;
transform-origin: top left;
-webkit-transform: rotateY(180deg) translateX(-4.75vw);
transform: rotateY(180deg) translateX(-4.75vw);
}
.cube .loading-cube-two.top {
width: 4.75vw;
height: 5vw;
-webkit-transform-origin: top left;
-ms-transform-origin: top left;
transform-origin: top left;
-webkit-transform: translateZ(4vw);
transform: translateZ(4vw);
}
.cube .loading-cube-two.front, .cube .loading-cube-two.back, .cube .loading-cube-two.right, .cube .loading-cube-two.left, .cube .loading-cube-two.top, .cube .loading-cube-two.bottom {
background: #48C9B0;
}
.cube .loading-cube-two.top {
background: #49d8bb;
background: #4AE8BD;
background: #5bf7cd;
}
.cube .loading-cube-two.front {
background: #40bea5;
}
.cube .loading-cube-two.left {
background: #39aa93;
}
.cube .loading-cube-three {
width: 4.75vw;
height: 4vw;
left: 60%;
top: -501%;
}
.cube .loading-cube-three.front {
width: 4.75vw;
height: 4vw;
-webkit-transform-origin: bottom left;
-ms-transform-origin: bottom left;
transform-origin: bottom left;
-webkit-transform: rotateX(-90deg) translateZ(1vw);
transform: rotateX(-90deg) translateZ(1vw);
}
.cube .loading-cube-three.back .........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
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