mirror of
https://github.com/wassname/svg2cube.git
synced 2026-08-07 11:29:39 +08:00
44 lines
1.6 KiB
CSS
44 lines
1.6 KiB
CSS
.cube, .cube .face, .cube .face * {
|
|
height: 170px;
|
|
width: 170px;
|
|
}
|
|
.cube {
|
|
position: relative;
|
|
-webkit-transform: translate(11em,11em)
|
|
transform: translate(11em,11em)
|
|
}
|
|
|
|
.cube * {
|
|
transform-origin: 0% 100%;
|
|
}
|
|
|
|
.cube2 .top {
|
|
position: relative;
|
|
-webkit-transform: rotateX(45deg) rotateZ(-45deg) rotateX(0deg);
|
|
-webkit-transform-style: preserve-3d;
|
|
-webkit-transition: .25s;
|
|
transform: rotateX(45deg) rotateZ(-45deg) rotateX(0deg);
|
|
transform-style: preserve-3d;
|
|
transition: .25s;
|
|
|
|
}
|
|
.cube2 .left {
|
|
-webkit-transform: rotateX(45deg) rotateZ(-45deg) rotateX(90deg);
|
|
-webkit-transform-style: preserve-3d;
|
|
-webkit-transition: .25s;
|
|
transform: rotateX(45deg) rotateZ(-45deg) rotateX(90deg);
|
|
transform-style: preserve-3d;
|
|
transition: .25s;
|
|
position: absolute;
|
|
|
|
}
|
|
.cube2 .right {
|
|
-webkit-transform: rotateX(45deg) rotateZ(-45deg) rotateY(90deg);
|
|
-webkit-transform-style: preserve-3d;
|
|
-webkit-transition: .25s;
|
|
transform: rotateX(45deg) rotateZ(-45deg) rotateY(90deg);
|
|
transform-style: preserve-3d;
|
|
transition: .25s;
|
|
position: absolute;
|
|
}
|