快捷导航
查看: 882|回复: 1

[分享] CSS3 transform属性

[复制链接]
发表于 2014-4-13 16:43:15 | 显示全部楼层 |阅读模式
本帖最后由 antzone 于 2017-1-11 13:16 编辑

CSS3的transform属性:
transform是"变换"的意思,可以控制指定元素的位移、拉伸、旋转和斜切效果。
变换在维度上又可以分为2D变换和3D变换,不过本章节并不会介绍这些细枝末节,而是从宏观上介绍一下变换的实质。
变换的实质:
transform变换是在特定的坐标系进行的。
默认状态下,此坐标系的原点在元素的中心位置;可以使用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:200px;
  height:100px;
  background-color:#ccc;
  transform:translate(295px,115px);
}
</style>
</head>
<body>
<div id="ant"></div>
</body>
</html>

上面的代码非常简单,可以将元素在水平方向平移295px,在垂直方向平移115px。
看似非常的简单,但是可能很多朋友并不了解其中的实质,图示如下:
1.jpg
变换坐标系默认的原点是元素的中心位置,通过translate()方法表面是对元素的进行了位移。
然而实质是对整个坐标系的移动,既然坐标系发生了位移,那么在上面绘制的元素同样发生了移动,坐标系的原点依然在元素的中心位置。
再来看一段代码实例:
[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>

上面的代码可以使元素围绕自身中心点旋转45度角;图示如下:
2.jpg
用红线标出的是原来坐标系的x轴和y轴;rotate()方法是对整个坐标系的旋转。
对于拉伸和斜切同样也是对坐标系的拉伸和斜切,后面就不再掩饰了。
上面的例子都是2D变换,对于3D变换也是同样的道理。
transform变换涉及到的内容:
(1).2D变换可以参阅CSS3 2D转换一章节。
(2).3D变换可以参阅CSS3 3D转换一章节。
(3).transform-origin可以参阅CSS3 transform-origin一章节。
(4).transform-style可以参阅CSS3 transform-style一章节。
(5).Perspective可以参阅CSS3 perspective一章节。
(6).Perspective-origin可以参阅CSS3 perspective-origin一章节。
(7).Backface-visibility可以参阅CSS3 backface-visibility一章节。
发表于 2017-1-11 13:20:58 | 显示全部楼层
关于transform最为深刻的讲解,从来没有一个教程是讲到这一点

发表回复

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

关于我们|手机版|小黑屋| 蚂蚁部落 ( 鲁ICP备10022556号-3 )

GMT+8, 2017-3-31 02:45 , Processed in 0.085610 second(s), 27 queries .

Powered by Discuz! X3.2 Licensed

Copyright © 2012-2017 Design: 蚂蚁部落

快速回复返回顶部 返回列表