17-transforms/translating-three-dimensions.html

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Translating in three dimensions</title>
<style type="text/css">
body {margin: 5em; perspective: 5000px;}
#worldbox {
	width: 500px; height: 500px; border: 3px solid gray;
	transform: translate(50%) rotateX(-25deg) rotateY(-40deg);
	transform: translate(50%) rotate3d();
	transform-style: preserve-3d;
}
head:hover #worldbox {animation: spin 5s linear infinite;}
@keyframes spin {
	100% {transform: rotateY(360deg);}
}
div[id$="a"] {background: red; position: absolute; top: 49.5%; left: 0; width: 100%; height: 0.5%; font: bold xx-large sans-serif;}
div#ya {transform: rotateZ(90deg);}
div#za {transform: rotateY(90deg);}

div[id$="a"] b {position: absolute; border: 1px solid black; background: rgba(255,255,255,0.9); color: silver; padding: 0.25em;}
div#xa b {right: 0; transform: translate(-0.5em,-0.67em);}
div#ya b {right: 0; transform: translate(-0.5em,-0.8em) rotateZ(-90deg);}
div#za b { transform: translate(0.5em,-0.67em);}

div[id^="t"] {background: linear-gradient(90deg,rgba(0,0,0,0.15),black); width: 150px; left: 50%;}
div[id^="t"] img {height: 20px; width: 20px; position: absolute; right: -2px; top: -9px;}
div#tya {width: 50px; transform-origin: 0 50%; transform: translate3d(150px,0,0) rotateZ(-90deg);}
div#tza {width: 100px; transform-origin: 0% 50%; transform: translate3d(150px,-50px,0) rotateY(-90deg);}
div#tba {width: 181px; transform-origin: 0 50%; transform: rotateY(-34deg) rotateX(45deg);
	background: linear-gradient(90deg, black 0%, black 50%, transparent 50%, transparent 100%); background-size: 10px;}
div#tha {width: 50px; transform-origin: 0 50%; transform: translate3d(150px,0,100px) rotateZ(-90deg);
	background: linear-gradient(90deg, black 0%, black 50%, transparent 50%, transparent 100%); background-size: 7px;}


p {font: 20px Andale Mono, monospace; position: relative; left: 330px; top: 2em; width: 20em;}
</style>
</head>
<body>

<div id="worldbox">
<div id="xa"><b>x</b></div>
<div id="ya"><b>y</b></div>
<div id="za"><b>z</b></div>
<div id="txa"><img src="i/arrowhead.png" alt=""></div>
<div id="tya"><img src="i/arrowhead.png" alt=""></div>
<div id="tza"><img src="i/arrowhead.png" alt=""></div>
<div id="tba"></div>
<div id="tha"></div>
</div>
<p>translate3d(150px,-50px,100px)</p>

</body>
</html>