CSS3中的2D转换(位移、旋转、缩放)

CSS3之2D转换

  转换(transform)是 CSS3 中具有颠覆性的特征之一,可以实现元素的位移(translate)旋转(rotate)缩放(scale)等效果。

一、2D转换之移动 translate

   2D移动可以改变元素在页面中的位置,类似于定位。

语法:

transform: translate(x,y);
transform: translateX(n);
transform: translateY(n);
div {
    width: 100px;
    height: 100px;
    background-color: pink;
    /* 1. margin 外边距移动
    margin-top: 100px;
    margin-left: 100px; */
    /* 2. 定位水平移动100px,垂直移动100px 
    position: relative;
    top: 100px;
    left: 100px;*/
    /* 3. transform 的 translate 移动 */
    transform: translate(100px,100px); 
}
CSS3中的2D转换(位移、旋转、缩放)_第1张图片

2D转换的**【特点】**:

  • translate 移动不会影响到其他元素的位置(绝对定位和外边距都会影响)
CSS3中的2D转换(位移、旋转、缩放)_第2张图片
  • translate 中如果填百分比单位是相对于自身元素的大小的 translate(50%,50%)

    <style>
       /* 清楚内外边距: *{ margin: 0;padding: 0;} */
       div {
           position: relative;
           width: 200px;
           height: 200px;
           background-color: pink;
           margin: 30px auto;
       } 
       p {
           position: absolute;
           top: 50%;		/* 向下移动大盒子高度的一半 */
           left: 50%;		/* 向右移动大盒子宽度的一半 */
           width: 50px;
           height: 50px;
           background-color: skyblue;
           transform: translate(-50%,-50%);/* 向上和左移动小盒子高度和宽度的一半 */
       }
    style>
    <body>
        <div>
            <p>p>
        div>
    body>
    
  • translate 移动对【行内标签】没有效果

二、2D转换之旋转 rotate

   2D 旋转指的是让元素在2维平面内顺时针旋转或者逆时针旋转。

语法:

transform: rotate(度数);

特点:

  • rotate 里面填度数,单位是 deg 如:transform: rotate(45deg);
  • 参数为正时,顺时针旋转,为负时,逆时针旋转
  • 默认旋转中心为元素的中心点

案例一:

   2D 旋转 rotate 做三角,用旋转做下面示图:

CSS3中的2D转换(位移、旋转、缩放)_第3张图片

2D 旋转中心点 transform-origin 可以设置

transform-origin:x y;
  • 参数 x 和 y 用空格隔开
  • x y 默认值是元素中心点(50% 50%)
  • 还可以给 x y 设置像素值,或 方位名词(top bottom left right center)

案例二:

   制作如下效果


三、2D转换之缩放 scale

   transform 中的 scale 可以放大和缩小元素。

语法:

transform: scale(x,y);
  • 其中 x,y 是数字,表示缩放宽、高的倍数,大于 1 是放大,小于 1 是缩小
  • 只有一个参数时,表示宽高同比例缩放
  • 直接修改宽高值也可以改变盒子大小,区别是:修改width、和 height 值以左上角为中心向下向右改变大小,并会影响文档流。而 scale 缩放以盒子几何中心为中心点向上下左右同时进行缩放,也可以通过 transform-origin 设置缩放中心点,同旋转用法一致。
CSS3中的2D转换(位移、旋转、缩放)_第4张图片

案例:

  利用缩放做如下效果

<style>
    div{
        overflow: hidden;
        float: left;
        margin: 10px;
    }
    div img {
        transition: all 0.5s;		// 添加动画
    }
    div img:hover {
        transform: scale(1.2);		// 添加缩放
    }
</style>
<body>
    <div><a href="#"><img src="./images/kc.png" alt=""></a></div>
    <div><a href="#"><img src="./images/kc.png" alt=""></a></div>
    <div><a href="#"><img src="./images/kc.png" alt=""></a></div>
</body>

案例:

  制作如下效果

CSS3中的2D转换(位移、旋转、缩放)_第5张图片
<style>
    ul {
        text-align: center;
    }
    li {
        list-style: none;
        display: inline-block;
        width: 25px;
        height: 25px;
        border-radius: 50%;
        border: 1px solid blue;
        text-align: center;
        line-height: 25px;
        margin: 5px;
        transition: all .5s;
    }
    li:hover {
        transform: scale(1.3);
    }
</style>
<body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
    </ul>
</body>

四、2D转换综合写法

  • 同时使用多个转换,格式为:transform: translate() rotate() scale() 即可。
  • 三种转换书写的顺序会影响转换效果(如果先旋转会改变坐标轴方向)
  • 当有位移移动时,一定要把位移放在最前面
<style>
    div {
        width: 100px;
        height: 100px;
        background-color: pink;
        margin: 50px auto;
        transition: all .5s;
    }
    div:hover {
        transform: translate(50px,100px) rotate(180deg) scale(1.5);
    }
</style>
<body>
    <div></div>
</body>
CSS3中的2D转换(位移、旋转、缩放)_第6张图片

你可能感兴趣的:(前端,#,CSS3,css3,前端)