CSS其它知识点(移动、旋转、缩放)

最新推荐文章于 2023-08-15 21:52:39 发布

路漫漫`

最新推荐文章于 2023-08-15 21:52:39 发布

阅读量349

点赞数

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

本文链接：https://blog.csdn.net/qq_39579087/article/details/108397559

版权

Web 同时被 2 个专栏收录

23 篇文章 0 订阅

订阅专栏

前端

11 篇文章 0 订阅

订阅专栏

2D转换

移动

利用这个可以实现盒子的水平垂直居中，我们之前的做法是：

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0; 
        }
        div {
            position: relative;
            height: 100px;
            width: 100px;
            background-color: blue;
        }
        div p {
            position: absolute;
            height: 20px;
            width: 20px;
            background-color: green;
            margin-top: -10px;
            margin-left: -10px;
            top: 50%;
            left: 50%;
        }
        
    </style>
</head>
<body>
    <div>
        <p>

        </p>
    </div>
</body>

效果：

我们先是给盒子加了一个绝对定位，然后用 top: 50%; left: 50%;调整位置：

我们发现位置偏了，于是要让它向上、左分别移动高度、宽度的一半便能达到目的：

margin-top: -10px;
margin-left: -10px;

绝对定位之后再进行margin操作是相对于盒子本身来移动的？

但现在用如下方式也可做到相同效果：

div p {
            position: absolute;
            height: 20px;
            width: 20px;
            background-color: green;
            /* margin-top: -10px;
            margin-left: -10px;  */
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }

旋转

我们可以用这个来做一些简单的特效，当鼠标移动到盒子上时会在0.5s内顺时针旋转360°：

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            margin: 200px auto;
            width: 200px;
            height: 200px;
            background-color: red;
            transition: all .5s ease;
            border: 3px solid plum;
        }
        div:hover {
            transform: rotate(360deg);
        }
    </style>
</head>
<body>
    <div>
        123
    </div>
</body>

还有这个：

我们之前做这种小三角是用的字体图标，但还可以用如下方法：

先弄两个边框，然后将其旋转相应角度就可以了

其实就是保留橙色区域的内容，下面来看具体代码：

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            position: relative;
            width: 200px;
            height: 40px;
            border: 2px solid #ccc;
        }
        div::after {
            content: "";
            position: absolute;
            height: 10px;
            width: 10px;
            border-right: 2px solid #ccc;
            border-bottom: 2px solid #ccc;
            right: 13px;
            top: 10px;
            transform: rotate(45deg);
            transition: all .5s ease;
        }
        div:hover:after {
            top:15px;
            transform: rotate(225deg);
        }
    </style>
</head>
<body>
    <div></div>
</body>

效果：

当鼠标经过时：

旋转的中心

上面所说的旋转都是以图形中心旋转的，也可以以其它点旋转。

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            width: 400px;
            height: 200px;
            background-color: red;
            margin: 100px auto;
            transition: all 1s;
            transform-origin: left bottom;
        }
        div:hover {
                transform: rotate(180deg);
        }
    </style>
</head>
<body>
    <div></div>
</body>

效果：
鼠标移动前
鼠标移动后
可以看见，现在是以左下顶点为中心旋转了(这里可能看不出来…)

旋转案例

来做一个案例：当鼠标经过一个盒子时，有另一个盒子旋转出现在里面。

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            width: 200px;
            height: 200px;
            overflow: hidden;
            border: solid 1px black;
            /* background-color: red; */
            margin: 100px auto;
        }
        div::before {
            content: "";
            display: block;
            width: 200px;
            height: 200px;
            background-color: rgb(79, 224, 79);
            transform: rotate(180deg);
            transform-origin: left bottom;
            transition: all .5s ease-in;
        }
        div:hover::before {
            transform: rotate(0deg);
        }
    </style>
</head>
<body>
    <div></div>
</body>

效果：
移动前
移动后

缩放

其实直接在hover里修改width/height也能放大，但这么做的放大盒子的上边不会改变，会向下放大；但scale默认是围绕着中心放大(当然可以设置放大的原点)，且不会挤走别的盒子。

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            width: 329px;
            height: 360px;
            overflow: hidden;
            margin: 100px auto;
            border: 1px solid black;
        }
        div img {
            transition: all .3s;
        }
        div:hover img {
            transform: scale(1.2);
        }
    </style>
</head>
<body>
    <div>
        <img src="./pic1.jpg" alt="">
    </div>
</body>