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

月影WEB

已于 2022-04-21 22:47:01 修改

阅读量137

点赞数 2

分类专栏： web前端文章标签：前端 css css3 web html

于 2022-04-21 22:45:18 首次发布

本文链接：https://blog.csdn.net/qq_34297287/article/details/124333878

版权

web前端专栏收录该内容

10 篇文章 0 订阅

订阅专栏

在“网页制作：初步了解CSS3（1）-web前端https://yydpt.blog.csdn.net/article/details/124310280?spm=1001.2014.3001.5502”的文章中已经给大家简单的介绍了一些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 倍。

关注微信公众号（月影WEB），了解更多的前后端知识；
欢迎大家关注互相交流学习；