当前位置:Web前端 > > 正文

css3常用特性(css3学习之2D转换功能详解)

时间:2022-01-26 01:33:31类别:Web前端

css3常用特性

css3学习之2D转换功能详解

前言

CSS3提供了2D转换功能,能够对元素进行移动、缩放和转动等功能。

2D转换的属性名为transform,使用方法为transform:method(value)。

2D转换方法有translate、scale、rotate、skew、matrix,还有基于这些分支出的translateX、scaleY等。

这里,我将会介绍到以下转换方法:

  1. translate()
  2. rotate()
  3. scale()
  4. skew() 

首先,我们先插入一个简单的html代码

  • <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Css3的2D转换</title>
        <style type="text/css">
     
     
            *{
                margin:0;
                padding:0;
            }
     
            #picture{
                width:100%;
                height:500px;
                background:#ccc;
            }
     
            img{
                margin:100px 0 0 100px;
            }
     
     
        </style>
    </head>
    <body>
     
        <li id="picture">       
                <img src="mary.jpg" alt="css3常用特性(css3学习之2D转换功能详解)" border="0" />
    
  • 这段代码我们可以实现在一个li里放一张图片,通过这张图片以便于向大家介绍以下方法。

    1.translate()方法:这个方法里可以有两个参数,中间用分号隔开,分别表示沿着X轴和Y轴移动的距离,这个距离是相对于该图片的移动距离,且向右为X轴的正方向,向下为Y轴的正方向。下面的代码表示将图片向右移动100px,向下也移动100。  

  • img{
        margin:100px 0 0 100px;
            transform:translate(100px,100px); 
    }
    
  • 2.rotate()方法:这个方法里有一个参数,表示要旋转的度数,正数表示顺时针旋转,那么负数就表示逆时针旋转了。在要旋转的度数后面添加deg (即degree,度数的意思)。以下代码表示将图片顺时针旋转50°。

  • img{
        margin:100px 0 0 100px;
            transform:rotate(50deg);
    }
    
  • 3.scale()方法:这个方法里有两个参数,没有单位。分别表示宽度和高度放大或缩小的倍数,如果大于1表示放大;如果小于一表示缩小。以下代码表示将图片的宽度和高度都放大两倍。

  • img{
        margin:100px 0 0 100px;
            transform:scale(2,2);
    }
    
  • 4.skew()方法:有两个参数,分别表示沿着X轴和Y轴倾斜转换,单位同样是deg,表示角度。这个方法不是很容易理解。首先给出下列代码:

  • img{
        margin:100px 0 0 100px;
        transform:skew(20deg,0deg);
    }
    
  • 表示将图片沿着x轴逆时针旋转20度。

    css3常用特性(css3学习之2D转换功能详解)

    这是没有使用skew()方法的样子

    css3常用特性(css3学习之2D转换功能详解)

    这是使用了skew()方法之后的样子。

    为什么呢?这是因为其x轴和Y轴的方向是这样的:

    css3常用特性(css3学习之2D转换功能详解)

    当x轴旋转20°时会将图片进行逆时针旋转,但是请注意:这里不是真正意义上的旋转,而有拉伸倾斜的意思,旋转之后,它的宽度并没有改变,并且做一条垂线可以发现高也是没有改变的。

    对于Y轴方向的旋转是一样的:

  • img{
        margin:100px 0 0 100px;
        transform:skew(0deg,20deg);
    }
    
  • 上面的代码表示将图片沿着Y轴方向旋转了20°。

    旋转之后,就是下面这样了:它是沿着顺时针方向旋转的。

    css3常用特性(css3学习之2D转换功能详解)

    如果,我们对x和y轴都旋转呢?

  • img{
        margin:100px 0 0 100px;
        transform:skew(20deg,20deg);
    }
    
  • 那么最终就是综合作用的效果了,如下图所示:

    css3常用特性(css3学习之2D转换功能详解)

    说了这么多,大家有没有发现我们每次偏移,旋转,倾斜,放大和缩小是相对于哪个点呢?

    如果你稍微细心的话,就会发现是相对于中心点。这里就要用到tansform-origin属性了。

    即通过这个属性,我们可以规定这些方法通过哪一个点作为原点。

    首先举几个例子。

    transform-origin:0 0;表示以左上角为原点。

    transform-origin:100% 0;表示以右上角为原点

    transform-origin:0 100%;表示以左下角为原点

    transform-origin:100% 100%;表示以右下角为原点

    于是我们可以得知,这些值的设定是以左上角为基点的,向右为x轴的正方向,向下为y轴的正方向。如果不设定这个属性,那么默认值为

    transform-origin:50% 50%;即以中心作为变换的基点。

    最后我还要说一下浏览器兼容的问题,为了使代码能在各个浏览器运行成功,我们需要在层叠样式表中多加几行代码,比如说rotate()方法:

  • 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 */
    
  • 这样,我们就可以在各个主要浏览器流畅运行了!

    总结

    以上就是这篇文章的全部内容了,希望本文的内容对各位学习或者使用CSS3能带来一定的帮助,如果有疑问大家可以留言交流。

    标签:
    上一篇下一篇

    猜您喜欢

    热门推荐