www.dbpj.net > CSS trAnsForm中的rotAtE的旋转中心怎么设置?

CSS trAnsForm中的rotAtE的旋转中心怎么设置?

使用transform-origin设置css3旋转中心,分别有两个参数,代表x和y轴的位置.旋转参考的零点:元素左上角的位置或者说盒子模型的左上角.参考点的坐标线:向右的x轴和几何x轴一样取正值,向下的y轴和几何y轴相反取正值,图解如下:

CSS transform中的rotate的旋转中心设置参考下面方法:transform-origin:50% 50%; 设置旋转中心为元素中心.transform-origin:0% 0%; 设置旋转中心为元素左上角.transform-origin:100% 100%; 设置旋转中心为元素右下角.

-webkit-transform-origin: center bottom;transform-origin: center bottomtransform-origin:[ <percentage> | <length> | left | center① | right ] [ <percentage> | <length> | top | center② | bottom ]?默认值:50% 50%,效果等同于center center适用于:所有块级元素及某些内联元素

通过这个transform-origin变形原点来设置旋转的中心.

有一个属性transform-origin: center center; (这是默认值)需要前缀https://developer.mozilla.org/zh-CN/docs/Web/CSS/transform-origin

利用transform-origin属性transform: rotate(45deg);transform-origin:20% 40%;

-webkit-transform-origin: center bottom; transform-origin: center bottom transform-origin:[ <percentage> | <length> | left | center① | right ] [ <percentage> | <length> | top | center② | bottom ]?默认值:50% 50%,效果等同于center center 适用于:

#div{ transform:rotate(10deg); /* 顺时针寻转10° */ transform:rotate(90deg); /* 顺时针寻转90° */}

其实这个旋转轴可以理解为xyz,可以理解以下坐标即为整个body面 对于2d 定义在x轴中心上:transform-origin:50% 0; 定义在y轴中心上:transform-origin:0 50%; 定义在几何中心上:transform-origin:50% 50%; 换做像素单位px也一样! 对于3d 这里的定位其实就是附加了一个z轴,道理相同

其实这个旋转轴可以理解为xyz,可以理解以下坐标即为整个body面对于2d定义在x轴中心上:transform-origin:50% 0;定义在y轴中心上:transform-origin:0 50%;定义在几何中心上:transform-origin:50% 50%;换做像素单位px也一样!对于3d这里的定位其实就是附加了一个z轴,道理相同

网站地图

All rights reserved Powered by www.dbpj.net

copyright ©right 2010-2021。
www.dbpj.net内容来自网络,如有侵犯请联系客服。zhit325@qq.com