css3怎么实现2D变形

今天小编给大家分享一下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变形”这篇文章的所有内容，感谢各位的阅读！相信大家阅读完这篇文章都有很大的收获，小编每天都会为大家更新不同的知识，如果还想学习更多的知识，请关注亿速云行业资讯频道。