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 {
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-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.75vw) translateX(-5vw) translateY(-4vw);
transform: rotateY(90deg) rotateZ(-90deg) translateZ(4.75vw) translateX(-5vw) translateY(-4vw);
}
.cube .loading-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 .loading-cube-three.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-three.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-three.front, .cube .loading-cube-three.back, .cube .loading-cube-three.right, .cube .loading-cube-three.left, .cube .loading-cube-three.top, .cube .loading-cube-three.bottom {
background: #48C9B0;
}
.cube .loading-cube-three.top {
background: #49d8bb;
background: #4AE8BD;
background: #5bf7cd;
}
.cube .loading-cube-three.front {
background: #40bea5;
}
.cube .loading-cube-three.left {
background: #39aa93;
}
.cube .loading-cube-four {
width: 4.75vw;
height: 4vw;
left: -65%;
top: -598%;
}
.cube .loading-cube-four.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-four.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-four.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-four.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-four.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-four.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-four.front, .cube .loading-cube-four.back, .cube .loading-cube-four.right, .cube .loading-cube-four.left, .cube .loading-cube-four.top, .cube .loading-cube-four.bottom {
background: #48C9B0;
}
.cube .loading-cube-four.top {
background: #49d8bb;
background: #4AE8BD;
background: #5bf7cd;
}
.cube .loading-cube-four.front {
background: #40bea5;
}
.cube .loading-cube-four.left {
background: #39aa93;
}
.cube .driver-cube {
width: 29vw;
height: 13.5vw;
top: -219.5%;
left: -23.75vw;
}
.cube .driver-cube.front {
width: 7vw;
height: 5vw;
-webkit-transform-origin: bottom left;
-ms-transform-origin: bottom left;
transform-origin: bottom left;
-webkit-transform: rotateX(-90deg) translateZ(9vw);
transform: rotateX(-90deg) translateZ(9vw);
}
.cube .driver-cube.back {
width: 7vw;
height: 5vw;
-webkit-transform-origin: top left;
-ms-transform-origin: top left;
transform-origin: top left;
-webkit-transform: rotateX(-90deg) rotateY(180deg) translateX(-7vw) translateY(-5vw);
transform: rotateX(-90deg) rotateY(180deg) translateX(-7vw) translateY(-5vw);
}
.cube .driver-cube.right {
width: 14vw;
height: 5vw;
-webkit-transform-origin: top left;
-ms-transform-origin: top left;
transform-origin: top left;
-webkit-transform: rotateY(90deg) rotateZ(-90deg) translateZ(7vw) translateX(-14vw) translateY(-5vw);
transform: rotateY(90deg) rotateZ(-90deg) translateZ(7vw) translateX(-14vw) translateY(-5vw);
}
.cube .driver-cube.left {
width: 14vw;
height: 5vw;
-webkit-transform-origin: top left;
-ms-transform-origin: top left;
transform-origin: top left;
-webkit-transform: rotateY(-90deg) rotateZ(90deg) translateY(-5vw);
transform: rotateY(-90deg) rotateZ(90deg) translateY(-5vw);
}
.cube .driver-cube.bottom {
width: 7vw;
height: 14vw;
-webkit-transform-origin: top left;
-ms-transform-origin: top left;
transform-origin: top left;
-webkit-transform: rotateY(180deg) translateX(-7vw);
transform: rotateY(180deg) translateX(-7vw);
}
.cube .driver-cube.top {
width: 7vw;
height: 14vw;
-webkit-transform-origin: top left;
-ms-transform-origin: top left;
transform-origin: top left;
-webkit-transform: translateZ(5vw);
transform: translateZ(5vw);
}
.cube .driver-cube.front, .cube .driver-cube.back, .cube .driver-cube.right, .cube .driver-cube.left, .cube .driver-cube.top, .cube .driver-cube.bottom {
background-color: #f06;
background-color: #13D1C6;
background-color: #f06;
background: #fff;
}
.cube .driver-cube.front {
background: #F0F4FD;
background: #e4ecf7;
background: #CFDAF2;
}
.cube .driver-cube.left {
background: -webkit-gradient(linear, left bottom, left top, color-stop(10%, #0E2850), color-stop(20%, #CFDAF2));
background: -o-linear-gradient(bottom, #0E2850 10% 20%, #CFDAF2 20%);
background: linear-gradient(totop, #0E2850 10% 20%, #CFDAF2 20%);
}
.cube .test-cube {
width: 2vw;
height: 1.5vw;
top: -28.75vw;
left: -25vw;
-webkit-transform: translateZ(0.2vw);
transform: translateZ(0.2vw);
}
.cube .test-cube.front {
width: 2vw;
height: 1.5vw;
-webkit-transform-origin: bottom left;
-ms-transform-origin: bottom left;
transform-origin: bottom left;
-webkit-transform: rotateX(-90deg) translateZ(-0.7vw);
transform: rotateX(-90deg) translateZ(-0.7vw);
}
.cube .test-cube.back {
width: 2vw;
height: 1.5vw;
-webkit-transform-origin: top left;
-ms-transform-origin: top left;
transform-origin: top left;
-webkit-transform: rotateX(-90deg) rotateY(180deg) translateX(-2vw) translateY(-1.5vw);
transform: rotateX(-90deg) rotateY(180deg) translateX(-2vw) translateY(-1.5vw);
}
.cube .test-cube.right {
width: 0.8vw;
height: 1.5vw;
-webkit-transform-origin: top left;
-ms-transform-origin: top left;
transform-origin: top left;
-webkit-transform: rotateY(90deg) rotateZ(-90deg) translateZ(2vw) translateX(-0.8vw) translateY(-1.5vw);
transform: rotateY(90deg) rotateZ(-90deg) translateZ(2vw) translateX(-0.8vw) translateY(-1.5vw);
}
.cube .test-cube.left {
width: 0.8vw;
height: 1.5vw;
-webkit-transform-origin: top left;
-ms-transform-origin: top left;
transform-origin: top left;
-webkit-transform: rotateY(-90deg) rotateZ(90deg) translateY(-1.5vw);
transform: rotateY(-90deg) rotateZ(90deg) translateY(-1.5vw);
}
.cube .test-cube.bottom {
width: 2vw;
height: 0.8vw;
-webkit-transform-origin: top left;
-ms-transform-origin: top left;
transform-origin: top left;
-webkit-transform: rotateY(180deg) translateX(-2vw);
transform: rotateY(180deg) translateX(-2vw);
}
.cube .test-cube.top {
width: 2vw;
height: 0.8vw;
-webkit-transform-origin: top left;
-ms-transform-origin: top left;
transform-origin: top left;
-webkit-transform: translateZ(1.5vw);
transform: translateZ(1.5vw);
}
.cube .test-cube.front, .cube .test-cube.back, .cube .test-cube.left, .cube .test-cube.right, .cube .test-cube.top, .cube .test-cube.bottom {
background-color: #f06;
background-color: #13D1C6;
background-color: #f06;
background: #0E2850;
}
.cube .test-cube-three {
-webkit-transform: translateZ(10vw);
transform: translateZ(10vw);
width: 42vw;
height: 0.5vw;
top: -34.9vw;
left: -33.4vw;
}
.cube .test-cube-three.front {
width: 7vw;
height: 5.25vw;
-webkit-transform-origin: bottom left;
-ms-transform-origin: bottom left;
transform-origin: bottom left;
-webkit-transform: rotateX(-90deg) translateZ(8.85vw);
transform: rotateX(-90deg) translateZ(8.85vw);
}
.cube .test-cube-three.back {
width: 7vw;
height: 5.25vw;
-webkit-transform-origin: top left;
-ms-transform-origin: top left;
transform-origin: top left;
-webkit-transform: rotateX(-90deg) rotateY(180deg) translateX(-7vw) translateY(-5.25vw);
transform: rotateX(-90deg) rotateY(180deg) translateX(-7vw) translateY(-5.25vw);
}
.cube .test-cube-three.right {
width: 14.1vw;
height: 5.25vw;
-webkit-transform-origin: top left;
-ms-transform-origin: top left;
transform-origin: top left;
-webkit-transform: rotateY(90deg) rotateZ(-90deg) translateZ(7vw) translateX(-14.1vw) translateY(-5.25vw);
transform: rotateY(90deg) rotateZ(-90deg) translateZ(7vw) translateX(-14.1vw) translateY(-5.25vw);
}
.cube .test-cube-three.left {
width: 14.1vw;
height: 5.25vw;
-webkit-transform-origin: top left;
-ms-transform-origin: top left;
transform-origin: top left;
-webkit-transform: rotateY(-90deg) rotateZ(90deg) translateY(-5.25vw);
transform: rotateY(-90deg) rotateZ(90deg) translateY(-5.25vw);
}
.cube .test-cube-three.bottom {
width: 7vw;
height: 14.1vw;
-webkit-transform-origin: top left;
-ms-transform-origin: top left;
transform-origin: top left;
-webkit-transform: rotateY(180deg) translateX(-7vw);
transform: rotateY(180deg) translateX(-7vw);
}
.cube .test-cube-three.top {
width: 7vw;
height: 14.1vw;
-webkit-transform-origin: top left;
-ms-transform-origin: top left;
transform-origin: top left;
-webkit-transform: translateZ(5.25vw);
transform: translateZ(5.25vw);
}
.cube .test-cube-three.bottom {
background-color: #f06;
background-color: #13D1C6;
background-color: #f06;
background: rgba(100, 100, 100, 0.9);
background: #416397;
background: -webkit-gradient(linear, left top, right top, color-stop(10%, #2b67b1));
background: -o-linear-gradient(left, #2b67b1 10% 80% #2b67b1 80%);
background: linear-gradient(toright, #2b67b1 10% 80% #2b67b1 80%);
}
.cube .test-cube-three.front, .cube .test-cube-three.back, .cube .test-cube-three.right, .cube .test-cube-three.left, .cube .test-cube-three.top, .cube .test-cube-three.bottom {
background-color: #f06;
background-color: #13D1C6;
background-color: #fff;
}
.cube .test-cube-three.left {
background: transparent;
}
.cube .test-cube-three.bottom, .cube .test-cube-three.right {
background: rgba(43, 51, 124, 0.9);
}
.cube .test-cube-three.back {
background: -o-linear-gradient(25deg, rgba(43, 51, 124, 0.825) 10% 75%, transparent 75%);
background: linear-gradient(65deg, rgba(43, 51, 124, 0.825) 10% 75%, transparent 75%);
}
.cube .test-cube-three.front {
background: -o-linear-gradient(156deg, #F4F6F7 10% 75%, transparent 75%);
background: linear-gradient(-66deg, #F4F6F7 10% 75%, transparent 75%);
background: -o-linear-gradient(156deg, rgba(0, 0, 0, 0.8) 10% 75%, transparent 75%);
background: linear-gradient(-66deg, rgba(0, 0, 0, 0.8) 10% 75%, transparent 75%);
background: -o-linear-gradient(156deg, #e4ecf7 10% 75%, transparent 75%);
background: linear-gradient(-66deg, #e4ecf7 10% 75%, transparent 75%);
background: -o-linear-gradient(156deg, #CFDAF2 10% 75%, transparent 75%);
background: linear-gradient(-66deg, #CFDAF2 10% 75%, transparent 75%);
}
.cube .test-cube-three.top {
background: -webkit-gradient(linear, left top, right top, color-stop(10%, transparent), color-stop(35%, #FBFBFB));
background: -o-linear-gradient(left, transparent 10% 35%, #FBFBFB 35%);
background: linear-gradient(toright, transparent 10% 35%, #FBFBFB 35%);
}
.cube .test-cube-three.bottom {
background: -webkit-gradient(linear, left top, left bottom, color-stop(10%, rgba(43, 51, 124, 0.9)), color-stop(99%, transparent));
background: -o-linear-gradient(top, rgba(43, 51, 124, 0.9) 10% 99%, transparent 99%);
background: linear-gradient(tobottom, rgba(43, 51, 124, 0.9) 10% 99%, transparent 99%);
}
.cube .test-cube-four {
-webkit-transform: translateZ(-15.35vw) rotateY(25deg);
transform: translateZ(-15.35vw) rotateY(25deg);
width: 42vw;
height: 0.5vw;
top: -35.3vw;
left: -39.25vw;
}
.cube .test-cube-four.front {
width: 7vw;
height: 5.75vw;
-webkit-transform-origin: bottom left;
-ms-transform-origin: bottom left;
transform-origin: bottom left;
-webkit-transform: rotateX(-90deg) translateZ(8.37vw);
transform: rotateX(-90deg) translateZ(8.37vw);
}
.cube .test-cube-four.back {
width: 7vw;
height: 5.75vw;
-webkit-transform-origin: top left;
-ms-transform-origin: top left;
transform-origin: top left;
-webkit-transform: rotateX(-90deg) rotateY(180deg) translateX(-7vw) translateY(-5.75vw);
transform: rotateX(-90deg) rotateY(180deg) translateX(-7vw) translateY(-5.75vw);
}
.cube .test-cube-four.right {
width: 14.12vw;
height: 5.75vw;
-webkit-transform-origin: top left;
-ms-transform-origin: top left;
transform-origin: top left;
-webkit-transform: rotateY(90deg) rotateZ(-90deg) translateZ(7vw) translateX(-14.12vw) translateY(-5.75vw);
transform: rotateY(90deg) rotateZ(-90deg) translateZ(7vw) translateX(-14.12vw) translateY(-5.75vw);
}
.cube .test-cube-four.left {
width: 14.12vw;
height: 5.75vw;
-webkit-transform-origin: top left;
-ms-transform-origin: top left;
transform-origin: top left;
-webkit-transform: rotateY(-90deg) rotateZ(90deg) translateY(-5.75vw);
transform: rotateY(-90deg) rotateZ(90deg) translateY(-5.75vw);
}
.cube .test-cube-four.bottom {
width: 7vw;
height: 14.12vw;
-webkit-transform-origin: top left;
-ms-transform-origin: top left;
transform-origin: top left;
-webkit-transform: rotateY(180deg) translateX(-7vw);
transform: rotateY(180deg) translateX(-7vw);
}
.cube .test-cube-four.top {
width: 7vw;
height: 14.12vw;
-webkit-transform-origin: top left;
-ms-transform-origin: top left;
transform-origin: top left;
-webkit-transform: translateZ(5.75vw);
transform: translateZ(5.75vw);
}
.cube .test-cube-four.left {
background-color: #f06;
background-color: #13D1C6;
background-color: #fff;
background: rgba(3, 70, 150, 0.9);
background: -webkit-gradient(linear, left bottom, left top, color-stop(10%, rgba(3, 70, 150, 0.8)), color-stop(78%, #2b337c));
background: -o-linear-gradient(bottom, rgba(3, 70, 150, 0.8) 10% 78%, #2b337c 78%);
background: linear-gradient(totop, rgba(3, 70, 150, 0.8) 10% 78%, #2b337c 78%);
background: -webkit-gradient(linear, left bottom, left top, color-stop(10%, rgba(46, 68, 173, 0.6)), color-stop(78%, #2b337c));
background: -o-linear-gradient(bottom, rgba(46, 68, 173, 0.6) 10% 78%, #2b337c 78%);
background: linear-gradient(totop, rgba(46, 68, 173, 0.6) 10% 78%, #2b337c 78%);
}
.cube .wheel-cube {
border-radius: 50%;
left: 3.15vw;
top: -28.5vw;
-webkit-transform: translateZ(-0.7vw);
transform: translateZ(-1vw);
}
.cube .wheel-cube.front {
width: 4vw;
height: 4vw;
-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 .wheel-cube.back {
width: 4vw;
height: 4vw;
-webkit-transform-origin: top left;
-ms-transform-origin: top left;
transform-origin: top left;
-webkit-transform: rotateX(-90deg) rotateY(180deg) translateX(-4vw) translateY(-4vw);
transform: rotateX(-90deg) rotateY(180deg) translateX(-4vw) translateY(-4vw);
}
.cube .wheel-cube.right {
width: 2vw;
height: 4vw;
-webkit-transform-origin: top left;
-ms-transform-origin: top left;
transform-origin: top left;
-webkit-transform: rotateY(90deg) rotateZ(-90deg) translateZ(4vw) translateX(-2vw) translateY(-4vw);
transform: rotateY(90deg) rotateZ(-90deg) translateZ(4vw) translateX(-2vw) translateY(-4vw);
}
.cube .wheel-cube.left {
width: 2vw;
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 .wheel-cube.bottom {
width: 4vw;
height: 2vw;
-webkit-transform-origin: top left;
-ms-transform-origin: top left;
transform-origin: top left;
-webkit-transform: rotateY(180deg) translateX(-4vw);
transform: rotateY(180deg) translateX(-4vw);
}
.cube .wheel-cube.top {
width: 4vw;
height: 2vw;
-webkit-transform-origin: top left;
-ms-transform-origin: top left;
transform-origin: top left;
-webkit-transform: translateZ(4vw);
transform: translateZ(4vw);
}
.cube .wheel-cube .slices {
width: 0.7vw;
height: 3.75vw;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-transform: translateZ(-2.6vw);
transform: translateZ(-2.6vw);
left: 9vw;
top: -40.5vw;
}
.cube .wheel-cube .slices.slice1, .cube .wheel-cube .slices.slice2, .cube .wheel-cube .slices.slice3, .cube .wheel-cube .slices.slice4, .cube .wheel-cube .slices.slice5, .cube .wheel-cube .slices.slice6, .cube .wheel-cube .slices.slice7, .cube .wheel-cube .slices.slice8, .cube .wheel-cube .slices.slice9, .cube .wheel-cube .slices.slice10, .cube .wheel-cube .slices.slice11, .cube .wheel-cube .slices.slice12, .cube .wheel-cube .slices.slice13, .cube .wheel-cube .slices.slice14, .cube .wheel-cube .slices.slice15, .cube .wheel-cube .slices.slice16, .cube .wheel-cube .slices.slice17, .cube .wheel-cube .slices.slice18, .cube .wheel-cube .slices.slice19, .cube .wheel-cube .slices.slice20 {
background: #2b337c;
border: 1vw solid #2b337c;
border-width: 1vw 0;
}
.cube .wheel-cube .slices.slice1 {
-webkit-transform: rotateY(0deg) translateZ(2vw);
transform: rotateY(0deg) translateZ(2vw);
}
.cube .wheel-cube .slices.slice2 {
-webkit-transform: rotateY(18deg) translateZ(2vw);
transform: rotateY(18deg) translateZ(2vw);
}
.cube .wheel-cube .slices.slice3 {
-webkit-transform: rotateY(36deg) translateZ(2vw);
transform: rotateY(36deg) translateZ(2vw);
}
.cube .wheel-cube .slices.slice4 {
-webkit-transform: rotateY(54deg) translateZ(2vw);
transform: rotateY(54deg) translateZ(2vw);
}
.cube .wheel-cube .slices.slice5 {
-webkit-transform: rotateY(72deg) translateZ(2vw);
transform: rotateY(72deg) translateZ(2vw);
}
.cube .wheel-cube .slices.slice6 {
-webkit-transform: rotateY(90deg) translateZ(2vw);
transform: rotateY(90deg) translateZ(2vw);
}
.cube .wheel-cube .slices.slice7 {
-webkit-transform: rotateY(108deg) translateZ(2vw);
transform: rotateY(108deg) translateZ(2vw);
}
.cube .wheel-cube .slices.slice8 {
-webkit-transform: rotateY(126deg) translateZ(2vw);
transform: rotateY(126deg) translateZ(2vw);
}
.cube .wheel-cube .slices.slice9 {
-webkit-transform: rotateY(144deg) translateZ(2vw);
transform: rotateY(144deg) translateZ(2vw);
}
.cube .wheel-cube .slices.slice10 {
-webkit-transform: rotateY(162deg) translateZ(2vw);
transform: rotateY(162deg) translateZ(2vw);
}
.cube .wheel-cube .slices.slice11 {
-webkit-transform: rotateY(180deg) translateZ(2vw);
transform: rotateY(180deg) translateZ(2vw);
}
.cube .wheel-cube .slices.slice12 {
-webkit-transform: rotateY(198deg) translateZ(2vw);
transform: rotateY(198deg) translateZ(2vw);
}
.cube .wheel-cube .slices.slice13 {
-webkit-transform: rotateY(216deg) translateZ(2vw);
transform: rotateY(216deg) translateZ(2vw);
}
.cube .wheel-cube .slices.slice14 {
-webkit-transform: rotateY(234deg) translateZ(2vw);
transform: rotateY(234deg) translateZ(2vw);
}
.cube .wheel-cube .slices.slice15 {
-webkit-transform: rotateY(252deg) translateZ(2vw);
transform: rotateY(252deg) translateZ(2vw);
}
.cube .wheel-cube .slices.slice16 {
-webkit-transform: rotateY(270deg) translateZ(2vw);
transform: rotateY(270deg) translateZ(2vw);
}
.cube .wheel-cube .slices.slice17 {
-webkit-transform: rotateY(288deg) translateZ(2vw);
transform: rotateY(288deg) translateZ(2vw);
}
.cube .wheel-cube .slices.slice18 {
-webkit-transform: rotateY(306deg) translateZ(2vw);
transform: rotateY(306deg) translateZ(2vw);
}
.cube .wheel-cube .slices.slice19 {
-webkit-transform: rotateY(324deg) translateZ(2vw);
transform: rotateY(324deg) translateZ(2vw);
}
.cube .wheel-cube .slices.slice20 {
-webkit-transform: rotateY(342deg) translateZ(2vw);
transform: rotateY(342deg) translateZ(2vw);
}
.cube .wheel-cover {
border-radius: 50%;
top: -34.25vw;
left: 0.35vw;
-webkit-transform: translateZ(0.135vw);
transform: translateZ(-0.4vw);
}
.cube .wheel-cover.front {
width: 1.75vw;
height: 1.75vw;
-webkit-transform-origin: bottom left;
-ms-transform-origin: bottom left;
transform-origin: bottom left;
-webkit-transform: rotateX(-90deg) translateZ(0.25vw);
transform: rotateX(-90deg) translateZ(0.25vw);
}
.cube .wheel-cover.back {
width: 1.75vw;
height: 1.75vw;
-webkit-transform-origin: top left;
-ms-transform-origin: top left;
transform-origin: top left;
-webkit-transform: rotateX(-90deg) rotateY(180deg) translateX(-1.75vw) translateY(-1.75vw);
transform: rotateX(-90deg) rotateY(180deg) translateX(-1.75vw) translateY(-1.75vw);
}
.cube .wheel-cover.right {
width: 2vw;
height: 1.75vw;
-webkit-transform-origin: top left;
-ms-transform-origin: top left;
transform-origin: top left;
-webkit-transform: rotateY(90deg) rotateZ(-90deg) translateZ(1.75vw) translateX(-2vw) translateY(-1.75vw);
transform: rotateY(90deg) rotateZ(-90deg) translateZ(1.75vw) translateX(-2vw) translateY(-1.75vw);
}
.cube .wheel-cover.left {
width: 2vw;
height: 1.75vw;
-webkit-transform-origin: top left;
-ms-transform-origin: top left;
transform-origin: top left;
-webkit-transform: rotateY(-90deg) rotateZ(90deg) translateY(-1.75vw);
transform: rotateY(-90deg) rotateZ(90deg) translateY(-1.75vw);
}
.cube .wheel-cover.bottom {
width: 1.75vw;
height: 2vw;
-webkit-transform-origin: top left;
-ms-transform-origin: top left;
transform-origin: top left;
-webkit-transform: rotateY(180deg) translateX(-1.75vw);
transform: rotateY(180deg) translateX(-1.75vw);
}
.cube .wheel-cover.top {
width: 1.75vw;
height: 2vw;
-webkit-transform-origin: top left;
-ms-transform-origin: top left;
transform-origin: top left;
-webkit-transform: translateZ(1.75vw);
transform: translateZ(1.75vw);
}
.cube .wheel-cover.front {
background: #bbb;
background: #AEB6BF;
}
.cube .wheel-cube-two {
border-radius: 50%;
-webkit-transform: translateZ(-0.7vw);
transform: translateZ(-0.7vw);
}
.cube .wheel-cube-two.front {
width: 4vw;
height: 4vw;
-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 .wheel-cube-two.back {
width: 4vw;
height: 4vw;
-webkit-transform-origin: top left;
-ms-transform-origin: top left;
transform-origin: top left;
-webkit-transform: rotateX(-90deg) rotateY(180deg) translateX(-4vw) translateY(-4vw);
transform: rotateX(-90deg) rotateY(180deg) translateX(-4vw) translateY(-4vw);
}
.cube .wheel-cube-two.right {
width: 2vw;
height: 4vw;
-webkit-transform-origin: top left;
-ms-transform-origin: top left;
transform-origin: top left;
-webkit-transform: rotateY(90deg) rotateZ(-90deg) translateZ(4vw) translateX(-2vw) translateY(-4vw);
transform: rotateY(90deg) rotateZ(-90deg) translateZ(4vw) translateX(-2vw) translateY(-4vw);
}
.cube .wheel-cube-two.left {
width: 2vw;
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 .wheel-cube-two.bottom {
width: 4vw;
height: 2vw;
-webkit-transform-origin: top left;
-ms-transform-origin: top left;
transform-origin: top left;
-webkit-transform: rotateY(180deg) translateX(-4vw);
transform: rotateY(180deg) translateX(-4vw);
}
.cube .wheel-cube-two.top {
width: 4vw;
height: 2vw;
-webkit-transform-origin: top left;
-ms-transform-origin: top left;
transform-origin: top left;
-webkit-transform: translateZ(4vw);
transform: translateZ(4vw);
}
.cube .wheel-cube-two .slices {
width: 0.7vw;
height: 3.75vw;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-transform: translateZ(-2.8vw);
transform: translateZ(-2.8vw);
left: -16vw;
top: -43vw;
}
.cube .wheel-cube-two .slices.slice1, .cube .wheel-cube-two .slices.slice2, .cube .wheel-cube-two .slices.slice3, .cube .wheel-cube-two .slices.slice4, .cube .wheel-cube-two .slices.slice5, .cube .wheel-cube-two .slices.slice6, .cube .wheel-cube-two .slices.slice7, .cube .wheel-cube-two .slices.slice8, .cube .wheel-cube-two .slices.slice9, .cube .wheel-cube-two .slices.slice10, .cube .wheel-cube-two .slices.slice11, .cube .wheel-cube-two .slices.slice12, .cube .wheel-cube-two .slices.slice13, .cube .wheel-cube-two .slices.slice14, .cube .wheel-cube-two .slices.slice15, .cube .wheel-cube-two .slices.slice16, .cube .wheel-cube-two .slices.slice17, .cube .wheel-cube-two .slices.slice18, .cube .wheel-cube-two .slices.slice19, .cube .wheel-cube-two .slices.slice20 {
background: #2b337c;
border: 1vw solid #2b337c;
border-width: 1vw 0;
}
.cube .wheel-cube-two .slices.slice1 {
-webkit-transform: rotateY(0deg) translateZ(2vw);
transform: rotateY(0deg) translateZ(2vw);
}
.cube .wheel-cube-two .slices.slice2 {
-webkit-transform: rotateY(18deg) translateZ(2vw);
transform: rotateY(18deg) translateZ(2vw);
}
.cube .wheel-cube-two .slices.slice3 {
-webkit-transform: rotateY(36deg) translateZ(2vw);
transform: rotateY(36deg) translateZ(2vw);
}
.cube .wheel-cube-two .slices.slice4 {
-webkit-transform: rotateY(54deg) translateZ(2vw);
transform: rotateY(54deg) translateZ(2vw);
}
.cube .wheel-cube-two .slices.slice5 {
-webkit-transform: rotateY(72deg) translateZ(2vw);
transform: rotateY(72deg) translateZ(2vw);
}
.cube .wheel-cube-two .slices.slice6 {
-webkit-transform: rotateY(90deg) translateZ(2vw);
transform: rotateY(90deg) translateZ(2vw);
}
.cube .wheel-cube-two .slices.slice7 {
-webkit-transform: rotateY(108deg) translateZ(2vw);
transform: rotateY(108deg) translateZ(2vw);
}
.cube .wheel-cube-two .slices.slice8 {
-webkit-transform: rotateY(126deg) translateZ(2vw);
transform: rotateY(126deg) translateZ(2vw);
}
.cube .wheel-cube-two .slices.slice9 {
-webkit-transform: rotateY(144deg) translateZ(2vw);
transform: rotateY(144deg) translateZ(2vw);
}
.cube .wheel-cube-two .slices.slice10 {
-webkit-transform: rotateY(162deg) translateZ(2vw);
transform: rotateY(162deg) translateZ(2vw);
}
.cube .wheel-cube-two .slices.slice11 {
-webkit-transform: rotateY(180deg) translateZ(2vw);
transform: rotateY(180deg) translateZ(2vw);
}
.cube .wheel-cube-two .slices.slice12 {
-webkit-transform: rotateY(198deg) translateZ(2vw);
transform: rotateY(198deg) translateZ(2vw);
}
.cube .wheel-cube-two .slices.slice13 {
-webkit-transform: rotateY(216deg) translateZ(2vw);
transform: rotateY(216deg) translateZ(2vw);
}
.cube .wheel-cube-two .slices.slice14 {
-webkit-transform: rotateY(234deg) translateZ(2vw);
transform: rotateY(234deg) translateZ(2vw);
}
.cube .wheel-cube-two .slices.slice15 {
-webkit-transf.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
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