实例首页
自学教程
IT工具箱
源代码
下载代码
上下布局
点击运行 >
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>css transform-origin 属性 实例 - 自学教程(runoops.com)</title> <style> #div1 { position: relative; height: 200px; width: 200px; margin: 100px; padding: 10px; border: 1px solid black; } #div2 { padding: 50px; position: absolute; border: 1px solid black; background-color: red; transform: rotate(45deg); transform-origin: 20% 40%; -ms-transform: rotate(45deg); /* IE 9 */ -ms-transform-origin: 20% 40%; /* IE 9 */ -webkit-transform: rotate(45deg); /* Safari and Chrome */ -webkit-transform-origin: 20% 40%; /* Safari and Chrome */ } </style> </head> <body> <div id="div1"> <div id="div2">HELLO</div> </div> </body> </html>
运行结果：