CSS基础(part22)--2D转换

学习笔记,仅供参考,有错必究

参考自:pink老师教案


文章目录

      • 2D转换
        • translate
        • rotate
        • scale



2D转换


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

  • 移动: translate
  • 旋转: rotate
  • 缩放: scale

translate


translate 语法:

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

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


知识点:

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

  • 举个例子

HTML代码:


<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>2D位移title>

    <style>
        div {
      
            width: 200px;
            height: 200px;
        }
        
        .demo1 {
      
            background-color: pink;
            transform: translate(50px, 50px);
        }
        
        .demo2 {
      
            background-color: red;
        }
    style>
head>

<body>
    <div class="demo1">1div>
    <div class="demo2">2div>
body>

html>

页面:

CSS基础(part22)--2D转换_第1张图片


rotate


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


rotate 语法:

/* 单位是:deg */
transform: rotate()

设置元素旋转的中心点:

transform-origin: x y;

知识点:

  • rotate 的单位是 deg
  • 角度为正时,顺时针,角度为负时,逆时针
  • 默认旋转的中心点是元素的中心点

  • 举个例子

HTML代码:


<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>2D旋转title>
    <style>
        img {
      
            width: 150px;
            border-radius: 50%;
            border: 5px solid blue;
            /* 过渡写到本身上 */
            transition: all 0.3s;
        }
        
        img:hover {
      
            transform: rotate(360deg);
        }
    style>
head>

<body>
    <img src="media/TX.jpg" alt="">
body>

html>

页面:

CSS基础(part22)--2D转换_第2张图片

注意,当把鼠标放在这个dog图片上时,图片会围绕中心旋转360度。


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 最大的优势为,可以设置转换中心点缩放,默认以中心点缩放,而且不影响其他盒子

  • 举个例子

HTML代码:


<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>2D缩放title>
    <style>
        p {
      
            background-color: pink;
        }
        
        div {
      
            width: 100px;
            height: 100px;
            background-color: blue;
            margin: 100px auto 10px auto;
            transform-origin: right top;
        }
        
        div:hover {
      
            /* 1. 里面写的数字不跟单位,就是倍数的意思 1就是1倍,2就是 2倍 */
            /* transform: scale(2, 2); */
            /* 2. 修改了宽度为原来的2倍 ,高度不变 */
            /* transform: scale(2, 1); */
            /* 3. 等比例缩放 同时修改宽度和高度*/
            transform: scale(2);
        }
    style>

head>

<body>
    <div>div>
    <p>安徽财经大学p>
body>

html>

页面:

CSS基础(part22)--2D转换_第3张图片


将鼠标移动到蓝色方块上:

CSS基础(part22)--2D转换_第4张图片

可以看到,方块以右上角为中心点放大了。

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