H5C3之2D转换

最新推荐文章于 2023-08-28 19:04:53 发布

萌新菜鸟前端

最新推荐文章于 2023-08-28 19:04:53 发布

阅读量325

点赞数 3

分类专栏： H5C3 文章标签：个人学习日记

本文链接：https://blog.csdn.net/zh_hunan/article/details/102689161

版权

H5C3 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

2D 转换之 translate

2D 转换

2D 转换是改变标签在二维平面上的位置和形状
移动： translate
旋转： rotate
缩放： scale

translate 语法

x 就是 x 轴上水平移动
y 就是 y 轴上水平移动

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

重点知识点

2D 的移动主要是指水平、垂直方向上的移动
translate 最大的优点就是不影响其他元素的位置
translate 中的100%单位，是相对于本身的宽度和高度来进行计算的
行内标签没有效果

代码演示

div {
  background-color: lightseagreen;
  width: 200px;
  height: 100px;
  /* 平移 */
  /* 水平垂直移动 100px */
  /* transform: translate(100px, 100px); */

  /* 水平移动 100px */
  /* transform: translate(100px, 0) */

  /* 垂直移动 100px */
  /* transform: translate(0, 100px) */

  /* 水平移动 100px */
  /* transform: translateX(100px); */

  /* 垂直移动 100px */
  transform: translateY(100px)
}

让一个盒子水平垂直居中

    <style>
        div {
            position: relative;
            width: 500px;
            height: 500px;
            background-color: pink;
            /* 1. 我们tranlate里面的参数是可以用 % */
            /* 2. 如果里面的参数是 % 移动的距离是 盒子自身的宽度或者高度来对比的 */
            /* 这里的 50% 就是 50px 因为盒子的宽度是 100px */
            /* transform: translateX(50%); */
        }
        
        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>123</span>
</body>

2D 转换 rotate

rotate 旋转

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

rotate 语法

/* 单位是：deg */
transform: rotate(度数)

重点知识点

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

代码演示

给元素添加转换属性 transform
属性值为 rotate(角度) 如 transform:rotate(360deg) 顺时针方向旋转360度

div{
      transform: rotate(0deg);
}

三角

    <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.2s;
        }
        /* 鼠标经过div  里面的三角旋转 */
        
        div:hover::after {
            transform: rotate(225deg);
        }
    </style>
</head>

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

设置元素旋转中心点(transform-origin)

transform-origin 基础语法

transform-origin: x y;

重要知识点

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

旋转中心案例

    <style>
        div {
            width: 200px;
            height: 200px;
            border: 1px solid #ccc;
            margin: 0 auto;
            overflow: hidden;
        }
        div::after {
            content: "";
            display: block;
            width: 100%;
            height: 100%;
            background-color: pink;
            transform: rotate(180deg);
            transform-origin: left bottom;
            transition: all 0.2s;
        }
        div:hover::after {
            transform: rotate(0deg);
        }
    </style>
</head>
<body>
    <div></div>
</body>

2D 转换之 scale

scale 的作用

用来控制元素的放大与缩小

语法

transform: scale(x, y)

知识要点

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

代码演示

  div:hover {
	   /* 注意，数字是倍数的含义，所以不需要加单位 */
	   /* transform: scale(2, 2) */
   
	   /* 实现等比缩放，同时修改宽与高 */
	   /* transform: scale(2) */
   
	   /* 小于 1 就等于缩放*/
	   transform: scale(0.5, 0.5)
   }

图片放大案例

    <style>
       div {
        width: 100px;
        height: 100px;
        background-color: hotpink;
        margin: 100px auto;
        transform-origin: top ;
        transition: all .2s;
       }
       div:hover {
           transform: scale(2);
           border-radius: 20px;
           background-color: skyblue;
       }
    </style>
</head>
<body>
    <div></div>
</body>

分页按钮案例

    <style>
        li {
            float: left;
            margin: 0 20px;
            width: 20px;
            height: 20px;
            border: 1px solid rgba(0, 0, 0, .5);
            border-radius: 50%;
            list-style: none;
            text-align: center;
            line-height: 20px;
            cursor: pointer;
        }
        li:hover {
            transform: scale(1.3);
            border: 3px solid rgba(0, 0, 0, .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>
        <li>8</li>
        <li>9</li>
    </ul>
</body>

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

知识要点

同时使用多个转换，其格式为 transform: translate() rotate() scale()
顺序会影响到转换的效果(先旋转会改变坐标轴方向)
但我们同时有位置或者其他属性的时候，要将位移放到最前面

代码演示

div:hover {
  transform: translate(200px, 0) rotate(360deg) scale(1.2)
}

萌新菜鸟前端

关注

3
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
H5C3之2D转换

2D 转换之 translate2D 转换2D 转换是改变标签在二维平面上的位置和形状移动： translate旋转： rotate缩放： scaletranslate 语法x 就是 x 轴上水平移动y 就是 y 轴上水平移动transform: translate(x, y)transform: translateX(n)transfrom: translateY(...
复制链接

扫一扫