2D转换的知识点

2d转换 之translate

坐标转换类似于定位。

transform:translate(x,y);
transform:translateY(n);
transform:translateX(n);

我们移动盒子的方式有三种:定位,margin, 2d转换移动

        div {
            width: 200px;
            height: 200px;
            background-color: pink;
            transform: translate(100px, 61px);
        }

重点:

  1. 不用影响其他的元素位置,还是占有原来的位置的。
  2. 百分比是相对于自身元素transparent(50%,50%);
  3. 对行内元素没有效果

2d转换之 rotate

transform:rotate(<度数>);

重点:

  1. <度数>的单位是deg (就是度) 比如 45deg=45°
  2. 默认的旋转中心是元素的中心点

实现如下效果:

旋转

    <style>
        div {
            width: 50px;
            height: 50px;
            border: 1px solid pink;
            border-radius: 50%;
            margin: 100px auto;
            transition: all 1s;
        }

        div img {
            width: 50px;
            height: 50px;
            border-radius: 50%;
        }

        div:hover {
            transform: rotate(360deg);
        }
    </style>

<body>
    <div>
        <img src="https://yingwiki.top/avatar" alt="">
    </div>
</body>

设置选择中心点 transform-origin

transform-origin:x y;

重点

  • 默认值为 transform-origin:50% 50%;,百分比同样以自身为参考
  • x y还可以是方位词:top right left center 等
  • 通过这个还可以设置缩放中心点

缩放scale

transform:scale(x,y);

x y是控制宽和高的放大倍率

重点:

  1. transform:scale(1,1); 没有变化
  2. transform:scale(2,2);放大两倍
  3. transform:scale(0.5,0.5);缩小一倍
  4. 注意当x=y时,可以简写transform:scale(n);只写一个
  5. 可以设置缩放的参考点,默认是以中心缩放,不会影响其他盒子的布局,只占用原来的位子
  6. 设置缩放中心点是通过这个来设置transform-origin

分页按钮效果练习

分页效果

    <style>
        li {
            float: left;
            width: 30px;
            height: 30px;
            margin: 0 5px;
            border: 1px solid cornflowerblue;
            border-radius: 30px;
            list-style: none;
            text-align: center;
            line-height: 30px;
            transition: all .5s;
        }

        li:hover {
            transform: scale(1.3);
        }

        a {
            text-decoration: none;
            color: cornflowerblue;
        }
    </style>
<body>
    <div>
        <ul>
            <li><a href="#">1</a></li>
            <li><a href="#">2</a></li>
            <li><a href="#">3</a></li>
            <li><a href="#">4</a></li>
            <li><a href="#">5</a></li>
            <li><a href="#">6</a></li>
            <li><a href="#">7</a></li>
        </ul>
    </div>

倾斜 skewX(a) skewY(a)

skewX(a)变换函数指定了沿 x 轴倾斜 的倾斜变换。

skewY(a)变换函数指定了沿 y 轴倾斜 的倾斜变换。

2d转换的混合写法

格式:transform:translate(15) rotate(15deg) scale(1.5)

当然这个执行的顺序就是就是我们书写的顺序,如果先旋转后位移则我们移动参考点是选择之后的了,为了到达我们的目标,我们一定要先写位移 translate后旋转之类的,当然你想实现那种效果也无妨,这里提醒一下。

结语

放假咸鱼的第13天
微信小程序

本文由 越行勤 创作,如果您觉得本文不错,请随意赞赏
采用 知识共享署名4.0 国际许可协议进行许可
本站文章除注明转载/出处外,均为本站原创或翻译,转载前请务必署名
原文链接:https://yingwiki.top/2021/01/07/c-s-s--2-d-zhuan-huan
最后更新于:  204  天前,内容可能已经不具有时效性,请谨慎参考。

Q.E.D.


努力学习的小菜鸟