CSS3 transform-origin & CSS3圆角border-radius属性详解

设置旋转元素的基点位置：

属性定义及使用说明

transform-Origin属性允许您更改转换元素的位置。

2D转换元素可以改变元素的X和Y轴。 3D转换元素，还可以更改元素的Z轴。

为了更好地理解Transform-Origin属性，请查看这个演示.

注意： 使用此属性必须先使用transform 属性。

语法

transform-origin: x-axis y-axis z-axis;

值	描述
x-axis	定义视图被置于 X 轴的何处。可能的值： left center right length %
y-axis	定义视图被置于 Y 轴的何处。可能的值： top center bottom length %
z-axis	定义视图被置于 Z 轴的何处。可能的值： length

常用的是2D旋转 ，比如时钟，DIV 旋转

设置基点时坐标轴的概念 ：以元素自身为一个坐标轴，坐标轴的起点就是元素左上角

终点就是元素的右下角，当然，也可设置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> 或百分比值

说明：border-*-*-radius 属性的两个值决定了作为边框外边形状的四分之一椭圆的半径（请看下图）。第1个取值是水平半径，第2个值是垂直半径。若没有第2个取值，从第1个复製过来。若其中1个长度为零，则角是垂直的，不是圆角。作为水平半径的百分比值，取值相对於边框盒的宽度，作為垂直半径的百分比值，取值相对於边框盒的高度。

每个方向的垂直半径和水平半径决定了 这个矩形坐标系的原点，CSS 把这个坐标轴原点和对应的边框原点形成的矩形用圆形连接起来。

根据设置垂直半径和水平半径，这个圆形可能是圆 或 椭圆。