CSS3的新特性(三）2D转换

最新推荐文章于 2024-05-24 16:01:01 发布

Bella..

最新推荐文章于 2024-05-24 16:01:01 发布

阅读量1.4k

点赞数 2

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

本文链接：https://blog.csdn.net/weixin_57826863/article/details/122529343

版权

html+css 专栏收录该内容

12 篇文章 1 订阅

订阅专栏

1.1 二维坐标系

1.2 2D转换之移动 translate

1.4 2D转换中心点 transform-origin

1.语法：

2.重点：

3. 旋转中心点案例：要记得伪元素属于行内元素不能设置大小（转换成块级元素）

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

转换(transform)可以简单理解为变形

移动：translate
旋转：rotate
缩放：scale

1.1 二维坐标系

2D转换是改变标签在二维平面上的位置和形状的一种技术

1.2 2D转换之移动 translate

2D移动是2D转换里面的一种功能，可以改变元素在页面中的位置，类似定位。

1. 语法：

transform：translate(x,y); 或者分开写

transform：translateX(n);

transform：translateY(n);

对语法的代码解释:

<style>
        /* 移动盒子的位置： 定位  盒子的外边距  2D转换移动 */

        div {
            width: 200px;
            height: 200px;
            background-color: pink;
            /* x就是x轴上移动位置，y就是y轴上移动位置 中间用逗号分隔 */
            /* transform: translate(x,y); */
            /* transform: translate(100px,100px); */
            /* 1.如果只移动x的坐标 */
            /* transform: translate(100px,0); */
            transform: translateX(100px);
            /* 2.如果只移动y的坐标 */
            /* transform: translate(0,100px); */
            transform: translateY(100px);
        }
    </style>
</head>
<body>
    <div></div>
</body>

2. 重点：

定义2D转换中的移动，沿着X和Y轴移动元素
translate最大的优点：不会影响到其他元素的位置
translate中的百分比单位是相对于自身元素（盒子自身宽度或高度）的translate:(50%,50%);
translate对行内标签没有效果eg:span

3. 让一个盒子水平垂直居中

    <style>
        div {
            position: relative;
            width: 500px;
            height: 500px;
            background-color: pink;
        }

        p {
            position: absolute;
            top: 50%;
            left: 50%;
            width: 200px;
            height: 200px;
            background-color: purple;
            /* 以前的做法 */
            /* margin-top: -100px;
            margin-left: -100px; */
            /* translate(-50%,-50%)盒子往上走自己高度的一半，宽度的一半 */
            transform:translate(-50%,-50%);
        }
        span{
            /* translate对行内元素无效 */
            transform: translate(300px,300px);
        }
    </style>
</head>

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

1.3 2D转换之旋转 rotate

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

1.语法：

transform：rotate(度数）

2.重点：

rotate里面跟度数，单位是deg 比如 rotate(45deg)
角度为正时，顺时针；角度为负时，逆时针
默认旋转的中心点时元素的中点

3.旋转案例及用代码写出三角：

<style>
     div {
         position: relative;
         width: 249px;
         height: 35px;
         border: 1px solid #000;  
     }
     div::after {
         content: "";
         position: absolute;
         top: 8px;
         right: 15px;
         width: 10px;
         height: 10px;
         border-right: 1px solid #000;
         border-bottom: 1px solid #000;
         transform:rotate(45deg);
         transition: all 0.5s;
     }
      /* 鼠标经过div  里面的三角旋转 */
      div:hover::after{
          /* 原来是朝右的箭头转到朝上 */
          transform: rotate(225deg);
      }

    </style>
</head>
<body>
    <div></div>
</body>

1.4 2D转换中心点 transform-origin

可以设置转换中心点，例如可以设置绕左下角旋转

1.语法：

transform-origin：x y；

2.重点：

注意后面的参数x和y用空格隔开
x y默认转换的中心点是元素的中心点（50% 50%）
还可以给x y设置像素或者方位名词（top bottom left right center）

3. 旋转中心点案例：要记得伪元素属于行内元素不能设置大小（转换成块级元素）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 刚开始内部hotpink这个盒子在内部显示，刚开始就旋转180，然后设置左下角旋转中心点，
再设置隐藏起来，鼠标一经过再显示出来 -->
    <style>
        div{
            overflow:hidden;
            width: 200px;
            height: 200px;
            border: 1px solid pink;
            /* 只有一个盒子的时候块级元素水平居中显示 */
            /* margin: 100px auto; */
            /* 多个盒子用浮动排列 */
            margin: 10px;
            float:left;
        }
        /* before伪元素是行内元素不能设置宽高,需要先转化 */
        div::before{
            content: "白敬亭";
            display: block;
            width: 100%;
            height: 100%;
            background-color: hotpink;
            transform: rotate(180deg);
            /* 以左下角旋转 */
            transform-origin: left bottom;
            /* 有过渡效果转上来会好看 */
            transition: all .5s;
        }
        /* 鼠标经过div 里面的before复原 */
        div:hover::before{
            transform: rotate(0deg);
        }
    </style>
</head>
<body>
    <div></div>
    <div></div>
    <div></div>
</body>
</html>

1.5 2D转换之缩放 scale

1.语法：

transform：scale(x,y);

2.重点：

其中x和y用逗号分隔
transform：scale(1,1):宽和高都放大一倍，相当于没有放大
transform：scale(2,2):宽和高都放大2倍
transform：scale(2):只写一个参数，第二个参数和第一个参数一样，相当于scale(2,2)
transform：scale(0.5,0.5):缩小
sacle缩放最大的优势：可以设置转换中心点缩放，默认以中心点缩放的，而且不影响其他盒子

eg：下面的代码中：5设置缩放中心点时在div大盒子里加例如transform-origin：left bottom；

拓展：shift+alt可以竖着选择插入

图片放大可以div img：hover { transform：scale(1.1);}

想要超出的部分隐藏：给父元素添加overflow：hidden；

3.分页按钮案例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 先给li设定好样式，鼠标一经过放大就行了 */
        li{
            float:left;
            width: 30px;
            height: 30px;
            border: 1px solid pink;
            margin: 10px;
            text-align: center;
            line-height: 30px;
            /* li前面没有小点; */
            list-style:none;
            border-radius: 50%;
            cursor: pointer;
            transition: all .4s;
        }
         li:hover{
             transform: scale(1.2);
         }
    </style>
</head>
<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>
</html>

1.6 2D转换综合写法以及顺序问题

多个属性中间空格隔开

1.7 2D转换总结

Bella..

关注

2
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
CSS3的新特性(三）2D转换

转换(transform)是CSS3中具有颠覆性的特征之一，可以实现元素的位移、旋转、缩放等效果转换(transform)可以简单理解为变形移动：translate 旋转：rotate 缩放：scale
复制链接

扫一扫