css3 | 浅谈transform变换

栏目: CSS · 发布时间: 5年前

transform 属性向元素应用 2D3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。学会 transform 的使用,才能更好创造出更好的页面效果。

2D转换

平移 translate()

translate() 方法,根据左(X轴)和顶部(Y轴)位置给定的参数,从当前元素位置移动。

div {
  -ms-transform: translate(50px,100px); /* IE 9 */
  -webkit-transform: translate(50px,100px); /* Safari and Chrome */
  transform: translate(50px,100px);
} 
复制代码

旋转 rotate()

rotate() 方法,在一个给定度数顺时针旋转的元素。负值是允许的,这样是元素逆时针旋转。

div {
  -ms-transform: rotate(30deg); /* IE 9 */
  -webkit-transform: rotate(30deg); /* Safari and Chrome */
  transform: rotate(30deg);
}
复制代码

缩放 scale()

scale() 方法,该元素增加或减少的大小,取决于宽度(X轴)和高度(Y轴)的参数

div {
  -ms-transform:scale(2,3); /* IE 9 */
  -webkit-transform: scale(2,3); /* Safari */
  transform: scale(2,3); /* 标准语法 */
}
复制代码

skew() 斜切

transform:skew( [,]);

包含两个参数值,分别表示X轴和Y轴倾斜的角度,如果第二个参数为空,则默认为0,参数为负表示向相反方向倾斜。

skewX(<angle>) ;表示只在X轴(水平方向)倾斜。

skewY(<angle>) ;表示只在Y轴(垂直方向)倾斜。

div {
  -ms-transform: skew(30deg,20deg); /* IE 9 */
  -webkit-transform: skew(30deg,20deg); /* Safari and Chrome */
  transform: skew(30deg,20deg);
}
复制代码

matrix() 方法

定义一个变换矩阵,严格来讲,以上的几种方法都是 matrix() 函数的特殊情况。在2D变换中,函数的参数是六个值。

简单来讲,向量来描述空间中的任何一个对象,然后用矩阵来描述空间中的变换。而使某个对象发生运动的方法就是用代表运动的矩阵乘以代表对象的那个向量。也就是说,在线性空间选定基之后,向量刻画对象,矩阵刻画对象的运动,用矩阵与向量的乘法施加运动。

举个例子:

div {
  transform: matrix(a,b,c,d,e,f);
}
复制代码

以上代码用矩阵表示就是:

1547402647196.jpg

元素的初始矩阵为 transform: matrix(1,0,0,1,0,0) ;也就是这个属性下元素没有任何变化。

在引入向量施加运动:

css3 | 浅谈transform变换
1547402937244.jpg

这样相乘得出两个式子:

x'=ax+cy+e;
复制代码
y'=bx+dy+f
复制代码

x'y' 就是元素被施加变换后的位置坐标,从这个式子不难看出,如果我们想把 x' 增加100,只需要 e 增加100,那么元素就会右移 100px

div {
  transform: matrix(1,0,0,1,100,0);
}
复制代码

再来看一个缩放的例子,假如我们想元素上每一点的x增加到原来的两倍,应该将x的系数变为2,即将a设为2,这样就可以做出水平方向上增大两倍的效果。

div {
  transform: matrix(2,0,0,1,0,0);
}
复制代码

可以看到 matrix 不同的组合可以做出任何你想要的效果。

transform-origin 属性

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

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

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

div{
  -ms-transform: rotate(45deg); /* IE 9 */
  -ms-transform-origin:20% 40%; /* IE 9 */
  -webkit-transform: rotate(45deg); /* Safari and Chrome */
  -webkit-transform-origin:20% 40%; /* Safari and Chrome */
  transform: rotate(45deg);
  transform-origin:20% 40%;
}
复制代码

3D 转换

学好3d首先要了解3d效果的坐标系:

css3 | 浅谈transform变换
1547405250346.jpg

3d变换的函数与2d类似,只是加上了3d,比如 translate 变为 translate3dtranslateZ 这表示3d变换中的z轴变换,这些用法和2d基本相同,不在重复,下面是一些3d中比较特殊的属性

属性的使用

transform-style:flat|preserve-3d;规定被嵌套元素如何在 3D 空间中显示(子元素是否保留3d位置)。

<div id="div1">
  <div id="div2">
  	3dtransform
  </div>
</div>
复制代码
# div1{
  height: 200px;
  width: 200px;
  margin: 100px;
  padding:10px;
  border: 1px solid black;
}
# div2{
  margin:50px; 
  border: 1px solid black;
  background-color: red;
  transform: rotateY(60deg);
  transform-style: preserve-3d;
}
复制代码

perspective: number|none;规定 3D元素的透视效果(作用于父元素)。

#div1{
	height: 150px;
	width: 150px;
	margin: 50px;
	padding:10px;
	border: 1px solid black;
	perspective:150;
}
#div2{
  margin:50px;
  border: 1px solid black;
  background-color: yellow;
  transform: rotateX(45deg);
}
复制代码

perspective-origin: x-axis y-axis;规定 3D 元素的底部位置。(作用于父元素,眼睛看元素的方向)

#div1{
	height: 150px;
	width: 150px;
	margin: 50px;
	padding:10px;
	border: 1px solid black;
	perspective:150;
	perspective-origin: 10% 10%;
}
#div2{
	margin:50px;
	border: 1px solid black;
	background-color: red;
	transform: rotateX(45deg);
}
复制代码

backface-visibility:visible | hidden定义元素在不面对屏幕时是否可见。

-webkit-backface-visibility:hidden;
复制代码

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

Servlet和JSP学习指南

Servlet和JSP学习指南

Budi Kurniawan / 崔毅、俞哲皆、俞黎敏 / 机械工业出版社华章公司 / 2013-4-14 / 59.00元

本书是系统学习Servlet和JSP的必读之作。由全球知名的Java技术专家(《How Tomcat Works》作者)亲自执笔,不仅全面解读Servlet 和JSP 的最新技术,重点阐述Java Web开发的重要编程概念和设计模型,而且包含大量可操作性极强的案例。 本书共18章:第1章介绍Servlet API和几个简单的Servlet;第2章讨论Session追踪,以及保持状态的4种技术......一起来看看 《Servlet和JSP学习指南》 这本书的介绍吧!

HTML 编码/解码
HTML 编码/解码

HTML 编码/解码

SHA 加密
SHA 加密

SHA 加密工具