网页制作：初步了解CSS3（3）-web前端

持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第15天，点击查看活动详情

在“网页制作：初步了解CSS3（2）-web前端”的文章中已经给大家简单的介绍了一些CSS3的属性！

现在给大家再继续介绍一些CSS3的有趣属性

skew() //通过 skew() 方法，元素翻转给定的角度，根据给定的水平线（X 轴）和垂直线（Y 轴）参数

例如：

div
{
              transform: skew(30deg,20deg);
      -ms-transform: skew(30deg,20deg);    /* IE 9 */
-webkit-transform: skew(30deg,20deg);    /* Safari and Chrome */
         -o-transform: skew(30deg,20deg);    /* Opera */
    -moz-transform: skew(30deg,20deg);    /* Firefox */
}

值 skew(30deg,20deg) 围绕 X 轴把元素翻转 30 度，围绕 Y 轴翻转 20 度。

matrix() //matrix() 方法把所有 2D 转换方法组合在一起。matrix() 方法需要六个参数，包含数学函数，允许您：旋转、缩放、移动以及倾斜元素。

如何使用 matrix 方法将 div 元素旋转 30 度

例如：

div
{
              transform:matrix(0.866,0.5,-0.5,0.866,0,0);
      -ms-transform:matrix(0.866,0.5,-0.5,0.866,0,0);        /* IE 9 */
    -moz-transform:matrix(0.866,0.5,-0.5,0.866,0,0);    /* Firefox */
-webkit-transform:matrix(0.866,0.5,-0.5,0.866,0,0);    /* Safari and Chrome */
         -o-transform:matrix(0.866,0.5,-0.5,0.866,0,0);        /* Opera */
}

3D 转换

rotateX() //通过 rotateX() 方法，元素围绕其 X 轴以给定的度数进行旋转。

例子：

div
{
              transform: rotateX(120deg);
-webkit-transform: rotateX(120deg);    /* Safari 和 Chrome */
    -moz-transform: rotateX(120deg);    /* Firefox */
}

rotateY() //通过 rotateY() 方法，元素围绕其 Y 轴以给定的度数进行旋转。

例子：

div
{
              transform: rotateY(130deg);
-webkit-transform: rotateY(130deg);    /* Safari 和 Chrome */
    -moz-transform: rotateY(130deg);    /* Firefox */
}

CSS3还有许多有趣的属性，但是由于现在CSS3还存在一些兼容性的问题，某些浏览器会有不兼容的情况，所以大家写网页的时候需要更具实际的情况来使用，切勿滥用！

CSS3的属性用于手机网站比较多点，PC端的网站根据实际情况来使用比较好！

关注公众号（月影WEB），了解更多的前后端知识；

欢迎大家关注互相交流学习；