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

CSS transform 属性

2019-4-20 21:41| 作者: admin| 查看: 862| 评论: 2|来自: 蚂蚁部落

此属性是CSS3新增,transform翻译成汉语具有"变换"或者"改变"的意思。

通过此属性具有非常强大的功能,比如可以实现元素的位移、拉伸或者旋转等效果。

最能体现transform 属性强大实力的是实现元素的3D变换效果。

本文并不会过多介绍变换的细节问题,而是分析一下transform变换的实质。

关于transform变换的细节可以参阅CSS 2D/3D转换一章节。

一.transform变换实质:

不少朋友可能对于变换有着比较熟练的应用,但是对于其实质并不真正了解。

比如translate位移操作,很多朋友认为是对于元素简单的水平或者垂直位移操作。

视觉上确实如此,但本质上并不止位置变换这么简单。

首先看一段代码实例:

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

上面代码非常简短,分析如下:

(1).通过translate将div元素向左和向下分别移动295像素和115像素。

(2).在视觉上实现了div元素的位移效果。

(3).事实上transform是针对元素所在变换坐标系的操作,所以上述位移也是对整个坐标系的位移。

(4).也就是说整个坐标系都发生了位移,而不是元素在坐标系中位移。

简单图示如下:

a:3:{s:3:\"pic\";s:43:\"portal/201904/20/214248w7z7p5kpxkh7dhkk.jpg\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

下面介绍一下上面代码transform变换的实质:

(1).默认状态下,变换坐标系的原点(0,0)位于元素的中心位置,如上图红色元素的中间红点位置。

(2).变换是对整个变换坐标系,上述代码将坐标系向左和向下分别移动了295像素和115像素。

(3).原来坐标系原点的位置是(0,0),变换之后坐标系原点坐标依然是(0,0),这一点要注意。

原点位置默认在元素的中心点,不过可以通过transform-origin属性改变原点的位置。

下面再来看一段代码实例,对前面知识进行一下加强:

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

上面代码通过rotate对元素实现了旋转效果,简单分析如下:

(1).很多时候感觉坐标系都是横平竖直的,这只是默认情况而已。

(2).rotate在视觉上实现了元素的旋转,实质上是将整个坐标系进行了旋转。

简单图示如下:

a:3:{s:3:\"pic\";s:43:\"portal/201904/20/214327ufa1g5emh25q1nff.jpg\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

对于元素的拉伸操作下面就不再举例子了,实质上是对整个坐标系的拉伸。

由此我们也可以得出,眼见为实这句话并不总是正确,可能会隐藏着一些其他东西。

二.代码实例:

前面虽然在理论上介绍了变换是针对整个坐标系的,可能有些朋友存在疑惑。

下面通过一段简单的代码实例进行一下证明,代码如下:

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

简单图示如下:

a:3:{s:3:\"pic\";s:43:\"portal/201904/20/214356o514f5xr15c6llwr.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

对象上述代码分析如下:

(1).首先向左移动150像素,然后再进行旋转操作。

(2).由于旋转是围绕原点进行的,如果不是坐标系的变换,那么旋转是以最初原点位置为中心。

(3).那么旋转后的元素,就是上图灰色元素所在的位置,如果是坐标系的变换,旋转后就是红色元素位置。

上面对变换的实质进行了较为详尽的介绍,如果对本文有任何疑问或者意见可以在文章底部留言。

1

鲜花

握手

雷人

路过

鸡蛋

刚表态过的朋友 (1 人)

发表评论

最新评论

引用 五花漏 2019-9-19 10:58
应该是向右移动吧,是不是写错了
引用 逆风飞行 2019-4-23 08:23
正值不应该是向右移动吗,为什么是向左?旋转是根据原点的位置旋转的吗?

查看全部评论(2)

返回顶部