mirror of
https://github.com/wassname/svg2cube.git
synced 2026-07-29 11:28:19 +08:00
57 lines
1.7 KiB
HTML
57 lines
1.7 KiB
HTML
<svg height="1128" version="1.1" width="1128" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" >
|
|
<desc>https://en.wikipedia.org/wiki/Isometric_projection </desc>
|
|
<foreignObject>
|
|
<style>
|
|
.cube, .cube .face, .cube .face * {
|
|
height: 170px;
|
|
width: 170px;
|
|
}
|
|
.cube {
|
|
position: relative;
|
|
-webkit-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;
|
|
|
|
}
|
|
.cube2 .left {
|
|
-webkit-transform: rotateX(45deg) rotateZ(-45deg) rotateX(90deg);
|
|
-webkit-transform-style: preserve-3d;
|
|
-webkit-transition: .25s;
|
|
position: absolute;
|
|
|
|
}
|
|
.cube2 .right {
|
|
-webkit-transform: rotateX(45deg) rotateZ(-45deg) rotateY(90deg);
|
|
-webkit-transform-style: preserve-3d;
|
|
-webkit-transition: .25s;
|
|
position: absolute;
|
|
}
|
|
</style>
|
|
</foreignObject>
|
|
|
|
<g class="cube cube2" id="c2notnested" >
|
|
<image
|
|
class="face top"
|
|
xlink:href="grass.svg"
|
|
/>
|
|
<image
|
|
class="face left"
|
|
xlink:href="grass.svg"
|
|
/>
|
|
<image
|
|
class="face right"
|
|
xlink:href="grass.svg"
|
|
/>
|
|
</g>
|
|
|
|
</svg>
|