快捷导航
蚂蚁部落 网站首页 前端教程 CSS3教程 查看内容

栏目导航

≡文本≡

≡颜色≡

≡渐变≡

≡边框≡

≡背景≡

≡transform变换≡

≡transition过渡≡

≡animation动画≡

≡column多列布局≡

≡flex弹性布局≡

≡其他≡

CSS3 transform

2017-2-11 20:52| 发布者: admin| 查看: 1257| 评论: 0|来自: 蚂蚁部落

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。

看似非常的简单,但是可能很多朋友并不了解其中的实质,图示如下:

a:3:{s:3:\"pic\";s:43:\"portal/201702/11/210409t7zow2z4a65plp78.jpg\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

变换坐标系默认的原点是元素的中心位置,通过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度角;图示如下:

a:3:{s:3:\"pic\";s:43:\"portal/201702/11/210458ucyw2cqqlqq45yu9.jpg\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

用红线标出的是原来坐标系的x轴和y轴;rotate()方法是对整个坐标系的旋转。

对于拉伸和斜切同样也是对坐标系的拉伸和斜切,后面就不再掩饰了。

上面的例子都是2D变换,对于3D变换也是同样的道理。

二.transform变换涉及到的内容:

(1).transform-origin参阅CSS3 transform-origin一章节。

(2).transform-style参阅CSS3 transform-style一章节。

(3).Perspective参阅CSS3 perspective一章节。

(4).Perspective-origin参阅CSS3 perspective-origin一章节。

(5).Backface-visibility参阅CSS3 backface-visibility一章节。

(6).2D/3D变换参阅CSS3 2D/3D变换一章节。


鲜花

握手

雷人

路过

鸡蛋

最新评论

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

GMT+8, 2017-8-21 12:42 , Processed in 0.085697 second(s), 21 queries .

Powered by Discuz! X3.2 Licensed

Copyright © 2012-2017 Design: 蚂蚁部落

返回顶部