标签：css3 scale 转换 缩放 transform 旋转 2D 中心点 translate

css3
2D转换
transform是css3中具有颠覆性的特征之一，可以实现元素的位移 旋转 缩放
移动 translate
旋转 rotate
缩放 scale


移动 translate
语法：transform:translate(x,y)
或者：transform:translateX(n);
transform:translateY(n);

translate最大的优点 不会影响其他盒子
translate 中的百分比单位是相对于自身元素translate（50%，50%）
对行内标签没有效果


旋转 rotate
语法：transfomr:ratate(度数)
rotate里面跟度数。单位是deg，比如 rotate(45deg)
角度是正时，顺时针；负时，逆时针
默认旋转的中心点时元素的中心点
旋转中心点 transform-origin:x y
注意后面的参数用空格隔开 xy默认的旋转中心点时元素的中心点50% 50%
还可以给xy设置像素或者方位名词

缩放 scale
语法 transform:scale(x,y);

/* 1.里面写的数字不跟单位 就是倍数的意思 */
/* transform: scale(2, 2); */
/* 2.宽度原来的2呗 高度不变 */
/* transform: scale(2, 1); */
/* 3.等比例缩放 同时修改了宽度和高度， 以下是宽度修改了2倍 高度默认和第一个参数一样 */
/* transform: scale(2); */
/* 4.可以进行缩小 小于1 就是缩放 */
/* transform: scale(0.5, .5) */
/* 5.scale的优点 ：不会影响其他盒子 可以设置缩放的中心点*/


2d转换的综合写法
1.同时使用多个旋转 其格式为：transform:translate() rotate() scale();
2.其顺序会影响旋转的效果，先旋转会改变坐标轴的方向
3.当我们同时有位移和其他属性的时候，记得要将位移放在最前面

标签：css3,scale,转换,缩放,transform,旋转,2D,中心点,translate
来源： https://www.cnblogs.com/dongweichang/p/15125584.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。