23 lines
494 B
HTML
23 lines
494 B
HTML
<!DOCTYPE HTML>
|
|
<style>
|
|
div {
|
|
width:100px;
|
|
height:100px;
|
|
margin:50px;
|
|
background-color:green;
|
|
}
|
|
|
|
#translatex {
|
|
-webkit-transform: translatex(calc(50% + 10px));
|
|
}
|
|
#translatey {
|
|
-webkit-transform: translatey(calc(40% - 5px));
|
|
}
|
|
#translatez {
|
|
-webkit-transform: perspective(calc(100px * 5)) translatez(calc(10px + 90px));
|
|
}
|
|
</style>
|
|
<div id="translatex">translate x</div>
|
|
<div id="translatey">translate y</div>
|
|
<div id="translatez">translate z</div>
|