标签：问题 nbsp document ram pre alt image 元素 set
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8" /> 5 <title>Document</title> 6 <style> 7 *{ 8 margin: 0; 9 padding:0; 10 } 11 .con{ 12 width:300px; 13 height: 300px; 14 background: #ccc; 15 padding:50px; 16 position: relative; 17 } 18 .con div{ 19 width:50px; 20 height: 50px; 21 background: blue; 22 animation:rota 10s; 23 } 24 /* .con:hover div{ 25 transform: translate(-10px,-10px); 26 transform-origin:0 0; 27 transform:rotate(10000deg); 28 transition:all 6s; 29 } */ 30 p{ 31 width:49px; 32 height: 49px; 33 position: absolute; 34 left:50px; 35 top: 50px; 36 border:1px solid #000; 37 } 38 @keyframes rota { 39 50%{ 40 transform-origin:0 0; 41 transform:rotate(10000deg); 42 /*将转换原点设置为0,0元素最后绕开始的左上角旋转*/ 43 } 44 100%{ 45 transform:rotate(-1000deg); 47 } 48 } 49 </style> 50 </head> 51 <body> 52 <div class="con"> 53 <div></div> 54 <p>用于比较位置的元素</p> 55 </div> 56 </body> 57 </html>
之前简单学习了一下Css3的transform属性，今天用的时候发现不不对劲，本来理解为坐标轴的中心在元素的中心，又重新回去看了理解一下。发现之前对坐标系的理解不正确。于是写了一段代码测试自己想法。
无论是3d或是2d转换，坐标原点都是在转换元素的左上角，向右为X轴正方形，向下为Y轴正方形。然后有个transform-origin属性，其默认值是(50%，50%，0)。
即在元素中心，rotate(),traslate(),scale()等函数转换是根据transform-origin规定的点进行的。
将转换原点设置为0,0元素最后绕开始的左上角旋转；
-------------------------------------------------------------------------------------------
很多人看过这张图吧，这张3d的坐标系容易混淆，背景并不是指元素，不能理解为坐标轴的原点在元素中心。
标签：问题 nbsp document ram pre alt image 元素 set
原文地址：http://www.cnblogs.com/xddhome/p/6021114.html
