序言
CSS3出示了2D变换作用，可以对元素开展挪动、放缩和旋转等作用。
2D变换的特性名为transform，应用方式为transform:method(value)。
2D变换方式有translate、scale、rotate、skew、matrix，也有根据这些支系出的translateX、scaleY等。
这里，我可能详细介绍到下列变换方式：
最先，大家先插进1个简易的html编码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF⑻">
<title>Css3的2D变换</title>
<style type="text/css">
*{
margin:0;
padding:0;
}
#picture{
width：100%;
height:500px;
background:#ccc;
}
img{
margin:100px 0 0 100px;
}
</style>
</head>
<body>
<div id="picture">
<img src="mary.gif" alt="This is a picture" >
</div>
</body>
</html>
这段编码大家能够完成在1个div里放1张照片，根据这张照片便于于向大伙儿详细介绍下列方式。
1.translate（）方式：这个方式里能够有两个主要参数，正中间用分号分隔，各自表明沿着X轴和Y轴挪动的间距，这个间距是相对该照片的挪动间距，且向右为X轴的正方位，向下为Y轴的正方位。下面的编码表明将照片向右挪动100px，向下也挪动100。
img{
margin:100px 0 0 100px;
transform:translate(100px,100px);
}
2.rotate()方式：这个方式里有1个主要参数，表明要转动的度数，正数表明顺时针转动，那末负数就表明逆时针转动了。在要转动的度数后边加上deg （即degree，度数的意思）。下列编码表明将照片顺时针转动50°。
img{
margin:100px 0 0 100px;
transform:rotate(50deg);
｝
3.scale()方式：这个方式里有两个主要参数，沒有企业。各自表明宽度和高宽比变大或变小的倍数，假如超过1表明变大；假如小于1表明变小。下列编码表明将照片的宽度和高宽比都变大两倍。
img{
margin:100px 0 0 100px;
transform:scale(2,2);
}
4.skew（）方式：有两个主要参数，各自表明沿着X轴和Y轴歪斜变换，企业一样是deg，表明角度。这个方式并不是很非常容易了解。最先得出以下编码：
img{
margin:100px 0 0 100px;
transform:skew(20deg,0deg);
｝
表明将照片沿着x轴逆时针转动20度。
这是沒有应用skew（）方式的模样
这是应用了skew（）方式以后的模样。
为何呢？这是由于其x轴和Y轴的方位是这样的：
当x轴转动20°时会将照片开展逆时针转动，可是请留意：这里并不是真实实际意义上的转动，而有拉伸歪斜的意思，转动以后，它的宽度并沒有更改，而且做1条垂线能够发现高也是沒有更改的。
针对Y轴方位的转动是1样的：
img{
margin:100px 0 0 100px;
transform:skew(0deg,20deg);
｝
上面的编码表明将照片沿着Y轴方位转动了20°。
转动以后，便是下面这样了：它是沿着顺时针方位转动的。
假如，大家对x和y轴都转动呢？
img{
margin:100px 0 0 100px;
transform:skew(20deg,20deg);
｝
那末最后便是综合性功效的实际效果了，以下图所示：
说了这么多，大伙儿有木有发现大家每次偏位，转动，歪斜，变大和变小是相对哪一个点呢？
假如你略微仔细的话，就会发现是相对管理中心点。这里就要用到tansform-origin特性了。
即根据这个特性，大家能够要求这些方式根据哪个点做为原点。
最先举几个事例。
transform-origin：0 0；表明以左上角为原点。
transform-origin：100% 0；表明以右上角为原点
transform-origin：0 100%；表明以左下角为原点
transform-origin：100% 100%；表明以右下角为原点
因而大家能够获知，这些值的设置是以左上角为基点的，向右为x轴的正方位，向下为y轴的正方位。假如不设置这个特性，那末默认设置值为
transform-origin:50% 50%;即以管理中心做为转换的基点。
最终我还要说1下访问器适配的难题，以便使编码能在各个访问器运作取得成功，大家必须在堆叠款式表格中多加几行编码，例如说rotate()方式：
transform: rotate(30deg); -ms-transform: rotate(30deg); /* IE 9 */ -webkit-transform: rotate(30deg); /* Safari and Chrome */ -o-transform: rotate(30deg); /* Opera */ -moz-transform: rotate(30deg); /* Firefox */
这样，大家便可以在各个关键访问器顺畅运作了！
总结
以上便是这篇文章内容的所有內容了，期待本文的內容对各位学习培训或应用CSS3能带来1定的协助，假如有疑惑大伙儿能够留言沟通交流。
Copyright © 2002-2020 如何创建网站_免费网站建站_网站建设文章_网站建设7个基本流程_自动建站 版权所有 （网站地图） 粤ICP备10235580号