<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title>CSS3 transform-origin 设置旋转元素的基点位置</title>
<style type="text/css">
html {}
body {position: relative;padding: 0;margin: 0;}
.m-box-wrapper{display: inline-block;margin: 20px 0 0; 300px;height:300px;border:1px solid #ddd;text-align: center;}
.m-box{display: inline-block;margin: 100px 0 0; 200px;height: 100px;transform: rotate(45deg); background: green;}
.m-test1{transform-origin:center center;}
.m-test2{transform-origin:right center;}
</style>
</head>
<body>
<div class="m-box-wrapper">
<div class="m-box m-test1"></div>
</div>
<div class="m-box-wrapper">
<div class="m-box m-test2"></div>
</div>
<script src="https://cdn.bootcss.com/jquery/1.9.0/jquery.js"></script>
<script>
</script>
</body>
</html>
