您的位置:首页> 前端教程> CSS3教程
文章导航

CSS transform-origin

2019-4-21 18:13| 作者: admin| 查看: 582| 评论: 0|来自: 蚂蚁部落

本站一贯的风格是,掌握概念从其名称入手,本文也不例外。

属性transform-origin由单词transform与origin构成,简单分析如下:

(1).transform:说明此属性与transform变换相关,这个是很显然的事情。

(2).origin:翻译成汉语是"基点"的意思,表示元素变换的基点位置。

此属性本身非常简单,关键在于对于transform变换实质的掌握,具体参阅CSS transform一章节。

一.知识铺垫:

CSS transform一章节已经介绍,transform变换是在一个变换坐标系进行的。

默认状态下,变换坐标系的原点位于元素的中心位置,简单图示如下:

a:3:{s:3:\"pic\";s:43:\"portal/201904/21/205949gexrgq1gznbqnueg.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

坐标系简单分析如下:

(1).默认状态下,x轴是水平的,向右为正。

(2).默认状态下,y轴是垂直的,向下为正。

(3).坐标系的原点位置在元素中心。

transform-origin属性就是用来改变transform变换坐标系的位置的。

二.transform-origin属性:

此属性用来改变变换的原点坐标,默认原点坐标在元素的中心。

语法结构:

[CSS] 纯文本查看 复制代码
transform-origin: x y z;

属性值解析如下:

(1).x:规定原点在元素中水平方向位置,默认是值50%,允许的值是left、center、right、length和%。

(2).y:规定原点在元素中垂直方向位置,默认是值50%,允许的值是top、center、bottom、length和%。

(3).z:规定原点在元素中z轴方向位置,默认是值0,允许的值只有length方式,这一点需要特别注意。

需要注意的是,变换坐标系的原点位置默认是(0,0)点,假设分别向右和向下移动了50像素,不能说此时变换坐标系的原点位置变为(50,50),坐标系的原点坐标依然是(0,0),只是相对于以前的原点位置发生了位移而已。

属性值格式:

有三个属性值,并且属性值可以有多种数据类型,下面对属性值的组合进行一下简单说明:

(1).属性值有三种类型,百分比,length和关键字。

(2).如果只有一个属性值,剩余的属性值都是默认值。

(3).如果有两个属性值,那么很明显是用于前两个参数,第三个属性值默认为0。

(4).如果属性值为关键字,且方向明确,那么顺序就不重要了,比如left、top、right和bottom,center则不可以。

[CSS] 纯文本查看 复制代码
transform-origin:right bottom;

上面的属性值顺序可以颠倒过来,修改如下:

[CSS] 纯文本查看 复制代码
transform-origin:bottom right ;

再来看一个加深一下理解,值设置一个属性值top:

[CSS] 纯文本查看 复制代码
transform-origin:top;

上面代码等同于如下代码:

[CSS] 纯文本查看 复制代码
transform-origin:50% top;

因为top是具有明确方位的,用于垂直方向。

浏览器支持:

(1).IE9+浏览器支持此属性。

(2).edge浏览器支持此属性。

(3).火狐浏览器支持此属性。

(4).谷歌浏览器支持此属性。

(5).opera浏览器支持此属性。

(6).safria浏览器支持此属性。

代码实例如下:

[HTML] 纯文本查看 复制代码运行代码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<style type="text/css">
#ant {
  margin:30px;
  width:100px;
  height:100px;
  background-color:#ccc;
  transform:rotate(45deg);
}
</style>
</head>
<body>
<div id="ant"></div>
</body>
</html>

代码运行效果截图如下:

a:3:{s:3:\"pic\";s:43:\"portal/201904/21/181349kz0tpqp94qnny3nu.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

代码简单分析如下:

(1).默认状态下,变换坐标系的原点在元素的中心位置。

(2).通过rotate旋转45deg也就是让元素围绕圆心旋转45deg。

千万不要想当然的认为,变换坐标系的原点位置在元素的左上角,于是围绕左上角旋转。

[HTML] 纯文本查看 复制代码运行代码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<style type="text/css">
div{
  margin:50px;
  width:100px;
  height:100px;
  background-color:blue;
  position: absolute;
  top:0px;
  left:0px;
}
.ant {
  transform:rotate(10deg);
  transform-origin:left top;
}
.origin {
  opacity: 0.1;
}
</style>
</head>
<body>
<div class="origin"></div>
<div class="ant"></div>
</body>
</html>

代码运行效果截图如下:

a:3:{s:3:\"pic\";s:43:\"portal/201904/21/181412vc2p2321j1d93aa4.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

对上述代码分析如下:

(1).上述代码中将ant元素的变换原点设置到元素的左上角。

(2).通过rotate将元素旋转10deg,也就是围绕它的左上角旋转10deg。

(3).为了便于观察效果,在ant元素的默认位置放置了一个具有透明度的元素。


鲜花

握手

雷人

路过

鸡蛋
上一篇:CSS3 2D/3D 转换下一篇:CSS column-span

最新评论

返回顶部