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