13518219792
今天小编给大家分享一下css3怎么实现2D变形的相关知识点，内容详细，逻辑清晰，相信大部分人都还太了解这方面的知识，所以分享这篇文章给大家参考一下，希望大家阅读完这篇文章后有所收获，下面我们一起来了解一下吧。
创新互联专注于固安网站建设服务及定制，我们拥有丰富的企业做网站经验。 热诚为您提供固安营销型网站建设，固安网站制作、固安网页设计、固安网站官网定制、微信小程序开发服务，打造固安网络公司原创品牌,更为您提供固安网站排名全网营销落地服务。
在css3中，加入了动画功能，这使得网页效果更加炫丽和简单。我们可以用css3的2d变形属性transform制作各种2d动画，比如图像旋转、倾斜、缩放、移动等。
首先认识一下css3 transform属性，transform属性的初始值是none，适用于块元素和行内元素。
transform的取值如下：
translate([, ])：
移动元素对象，基于X和Y坐标移动重新定位元素。第一个参数对应X轴，第二个参数对应Y轴。如果第二个参数未提供，则默认值为0
translateX()：指定对象X轴（水平方向）的平移
translateY()：指定对象Y轴（垂直方向）的平移
rotate()
旋转元素对象，即指定对象的2D旋转，按照 ransform-origin 属性的定义为基点，默认为 center,center。
允许传递的是一个度数值来进行元素的转动；这个度数值可以取正值也可以取负值，在这里，正值代表顺时针旋转，负值代表逆时针旋转，在这里通过指定的角度参数对元素指定一个2Droation（2D旋转），但是需要有trans-origin属性的定义。trans-origin定义的是旋转的基点，常见的写法为：transform:rotate(30deg);表示顺时针旋转30度；
scale([, ])
缩放元素对象，即指定对象的2D缩放。
第一个参数对应X轴，第二个参数对应Y轴。如果第二个参数未提供，则默认取第一个参数的值。
它使用一个或者两个正数和负数以及小数做为参数；两参数的含义：依次x轴缩放和y轴缩放，正数代表放大，负数代表缩小，当使用小数时，大于1代表放大，小于1代表缩小，当使用一个参数时表示x轴和y轴缩放相同；
scale（）方法具有三种情况：
scale（x,y）使元素水平方向和垂直方向同时缩放（也就是x轴和y轴同时缩放）；
scaleX(x)元素仅水平方向缩放（x轴缩放）；
scaleY（y）元素仅垂直方向缩放（y轴缩放），这里要注意的是：这三个方法具有相同的缩放中心点和基数，其中心点就是元素的中心位置，缩放基数为1，值大于1元素放大，值小于1，元素则缩小。
scaleX()：指定对象X轴的（水平方向）缩放
scaleY()：指定对象Y轴的（垂直方向）缩放
skew( [, ])
倾斜元素对象，即指定对象斜切扭曲。第一个参数对应X轴，第二个参数对应Y轴。如果第二个参数未提供，则默认值为0
skewX()：指定对象X轴的（水平方向）扭曲
skewY()：指定对象Y轴的（垂直方向）扭曲
matrix(,,,,,)：
定义矩阵变换，即以一个含六值的(a,b,c,d,e,f)变换矩阵的形式指定一个2D变换，相当于直接应用一个[a,b,c,d,e,f]变换矩阵。
下面通过一个简单的示例，让大家更好的理解css3 2D transform属性。
在本示例中，鼠标经过图像时div元素会放大并旋转，移开鼠标后又恢复原来的效果。
css样式代码如下：
div {
margin:100px 0;
width: 400px;
height: 100px;
background:url(images/bg1.jpg) center;
}
div:hover {
/* 定义动画的状态 */
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
-transform: rotate(-90deg);
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}
以上就是“css3怎么实现2D变形”这篇文章的所有内容，感谢各位的阅读！相信大家阅读完这篇文章都有很大的收获，小编每天都会为大家更新不同的知识，如果还想学习更多的知识，请关注创新互联行业资讯频道。
