设置旋转元素的基点位置:
属性定义及使用说明
transform-Origin属性允许您更改转换元素的位置。
2D转换元素可以改变元素的X和Y轴。 3D转换元素,还可以更改元素的Z轴。
为了更好地理解Transform-Origin属性,请查看这个演示.
注意: 使用此属性必须先使用transform 属性。
语法
值 | 描述 |
---|---|
x-axis | 定义视图被置于 X 轴的何处。可能的值:
|
y-axis | 定义视图被置于 Y 轴的何处。可能的值:
|
z-axis | 定义视图被置于 Z 轴的何处。可能的值:
|
设置基点时坐标轴的概念 :以元素自身为一个坐标轴,坐标轴的起点就是元素左上角
终点就是元素的右下角,当然,也可设置X轴Y轴方向无限延伸。
transform-Origin 不设置时默认是元素中心,即 以元素自身为基准左上角left ,top 为50 % ,50%
比如要旋转 <div >HELLO</div>
不改变元素的起始位置 设置 transform: rotateY:(20deg); 以元素左上角原点为基点旋转20度。
需要以元素中心为基准旋转,那就需要设置转换起始位置:
transform-Origin:50%,50% 元素的对角线中心即是元素的中心点。
百分比模式 是以元素本身的宽度,高度为基础的。
需要以元素右下角为基点旋转,那就是设置为
transform-Origin:100%,100%
X轴设置为 left,center,right,length,%
设置为left就是坐标原点=0%,center 就是X轴的中心点=50%
设置为right就是坐标原点的 100%
length就是按照像素或是其他有效CSS 单位设置,比如 30PX
y轴的情况依此类推,
X轴与Y轴的设置唯一定位到坐标轴上的一个点,然后
就是以这个点做为基点来旋转,就好比DIV挂在墙上,然后X轴Y轴的定义就是对应于在DIV 的某个位置
上钉个钉子,DIV 就以钉子为圆心旋转了。
border-radius属性
border-radius: 10px 20px 30px;
每个半径的四个值按照左上、右上、右下、左下的顺序,顺时针方向旋转设置 左 右 右下 左下
若没有左下取值则使用右上取值,若没有右下取值则使用左上取值,若没有右上取值则使用左上取值。
名称: | border-top-left-radius、border-top-right-radius、border-bottom-right-radius、border-bottom-left-radius |
取值: | [ <length> | <%> ]{1,2} |
初始: | 0 |
适用于: | 所有元素 |
继承: | 否 |
百分比: | 相对于边框盒子相应的边.详情看下面说明 |
计算值: | 两个绝对 <length> 或百分比值 |
每个方向的垂直半径和水平半径决定了 这个矩形坐标系的原点,CSS 把这个坐标轴原点和对应的边框原点形成的矩形用圆形连接起来。
根据设置垂直半径和水平半径,这个圆形可能是圆 或 椭圆。