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

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

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

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

2D转化

translate() //通过 translate() 方法，元素从其当前位置移动，根据给定的 left（x 坐标） 和 top（y 坐标） 位置参数

例如：

div
{
              transform: translate(50px,100px);
      -ms-transform: translate(50px,100px);    /* IE 9 */
-webkit-transform: translate(50px,100px);    /* Safari and Chrome */
         -o-transform: translate(50px,100px);    /* Opera */
    -moz-transform: translate(50px,100px);    /* Firefox */
}

把元素从左侧向右边移动 50 像素，从顶端向下面移动 100 像素

rotate() //通过 rotate() 方法，元素顺时针旋转给定的角度。允许负值，元素将逆时针旋转

例如：

div
{
              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 */
}

值 rotate(30deg) 把元素顺时针旋转 30 度。

scale() //通过 scale() 方法，元素的尺寸会增加或减少，根据给定的宽度（X 轴）和高度（Y 轴）参数

例如：

div
{
              transform: scale(2,4);
      -ms-transform: scale(2,4);    /* IE 9 */
-webkit-transform: scale(2,4);    /* Safari 和 Chrome */
         -o-transform: scale(2,4);    /* Opera */
    -moz-transform: scale(2,4);    /* Firefox */
}

值 scale(2,4) 把宽度转换为原始尺寸的 2 倍，把高度转换为原始高度的 4 倍。

在“网页制作：初步了解CSS3（3）-web前端”里面会继续讲解CSS3的其它有趣属性！

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

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