【HTML CSS】笔记7日 2D转换

最新推荐文章于 2024-08-31 21:49:18 发布
最新推荐文章于 2024-08-31 21:49:18 发布
阅读量280 收藏 1
点赞数
分类专栏： 前端 文章标签： html css 前端

1. WEB服务器

2. [CSS3]2D转换

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

2.1 二维坐标系

  • 2D转换是改变标签在二维平面上的位置和形状的一种技术，先来学习二维坐标系。
  • 网页中的坐标有异于数学中常见的坐标。
    在这里插入图片描述

2.2 移动translate

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

  • transform: translate(x, y);定义2D转换中的移动，沿着 X 和 Y 轴移动元素。
<!DOCTYPE html>
<html lang="zh-CN">
  <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;
        background-color: pink;
        transform: translate(100px, 100px);
      }
    </style>
  </head>
  <body>
    <div></div>
  </body>
</html>
  • transform: translateX(n);定义2D转换中的移动，沿着 X 轴移动元素。
  • transform: translateY(n);定义2D转换中的移动，沿着 Y 轴移动元素。
<!DOCTYPE html>
<html lang="zh-CN">
  <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;
        background-color: pink;
        transform: translateX(100px);
      }
    </style>
  </head>
  <body>
    <div></div>
  </body>
</html>
  • translate 最大的优点在于不会影响其他元素的位置。
  • translate 中的百分比单位 % 是相对于自身元素宽高的百分比。 transform: translate(50%, 50%);
  • 对行内标签没有效果。
【案例】让盒子实现水平居中和垂直居中
  • 【以前的方法】
<!DOCTYPE html>
<html lang="zh-CN">
  <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: 200px;
        background-color: pink;
      }
      p {
        position: absolute;
        top: 50%;
        left: 50%;
        width: 100px;
        height: 100px;
        background-color: skyblue;
        margin-top: -50px;
        margin-left: -50px;
      }
    </style>
  </head>
  <body>
    <div><p></p></div>
  </body>
</html>
  • 【现在的方法】
<!DOCTYPE html>
<html lang="zh-CN">
  <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: 200px;
        background-color: pink;
      }
      p {
        position: absolute;
        top: 50%;
        left: 50%;
        width: 100px;
        height: 100px;
        /* p 标签有默认的 margin-top 和 margin-bottom */
        margin: 0;
        background-color: skyblue;
        transform: translate(-50%, -50%);
      }
    </style>
  </head>
  <body>
    <div><p></p></div>
  </body>
</html>

在这里插入图片描述

2.3. 旋转rotate

  • 语法：transform: rotate(度数);。
  • roate 里面跟度数，单位是deg。例如：rotate(45deg);。
  • 角度为正时，顺时针，负时，逆时针。
  • 默认旋转的中心点是元素的中心点。
【案例】旋转的兔兔，效果如下：

在这里插入图片描述

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
        body {
            position: relative;
        }
      img {
        position: absolute;
        top: 50%;
        left: 50%;
        width: 200px;
        height: 200px;
        /* 顺时针旋转45° */
        /* transform: rotate(45deg); */
        border-radius: 50%;
        border: 5px solid pink;
        margin-left: -100px;
        margin-top: 60px;
        /* 过渡写到本身上，谁做动画给谁加。 */
        transition: all 1s;
      }
      img:hover {
          transform: rotate(360deg);
      }
    </style>
  </head>
  <body>
    <img src="rabbit01.jpg" alt="" />
  </body>
</html>
【案例】三角形

在这里插入图片描述

  • 首先给一个div，div里面需要一个小三角。这里没有再往div里添加一个盒子，而是使用了伪元素::after。
  • 伪元素由于是行内元素，行内元素没有大小之说，所以我们需要将其进行转换。恰巧伪元素用到了定位，所以就需要转换了。
  • 给伪元素这个小盒子一个右边框，一个下边框，然后旋转45°，就完成了小三角的制作。
  • 之后则继续做了一个鼠标放上去做旋转的动画。本身已经有了45°了，在45°的基础上再旋转180°，因此总共旋转了225°。最后再加一个过渡，动画就完成了。
<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <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.6s;
      }
      /* 鼠标经过 里面的三角旋转 */
      div:hover::after {
          transform: rotate(225deg);
      }
    </style>
  </head>
  <body>
    <div></div>
  </body>
</html>

2.4. transform-origin2D转换中心点

  • 我们可以设置元素转换的中心点。
  • 语法：transform-origin: x y;。
  • 注意后面的参数 x 和 y 用空格隔开。
  • 还可以给 x y 设置像素或者方位名词（top bottom left right center）。
    在这里插入图片描述
    在这里插入图片描述
<!DOCTYPE html>
<html lang="zh-CN">
  <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;
          background-color: pink;
          margin: 100px auto;
          transition: all 1s;
          /* 1. 可以跟方位名词 */
          /* transform-origin: left bottom; */
          /* 2. 默认的是50% 50% 等价于center center */
          /* 3. 可以是px像素 */
          transform-origin: 50px 50px;
      }
      /* 鼠标经过 里面的三角旋转 */
      div:hover {
          transform: rotate(360deg);
      }
    </style>
  </head>
  <body>
    <div></div>
  </body>
</html>
旋转中心点案例

在这里插入图片描述

<!DOCTYPE html>
<html lang="zh-CN">
  <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;
          border: 1px solid pink;
          margin: 100px auto;
          overflow: hidden;
      }
      div::before {
        content: "";
        display: block;
        width: 100%;
        height: 100%;
        background-color: skyblue;
        transform: rotate(180deg);
        transform-origin: left bottom;
        transition: all 0.4s;
      }
      div:hover::before {
        transform: rotate(0deg);
      }
    </style>
  </head>
  <body>
    <div></div>
  </body>
</html>

2.5. 2D转换之缩放scale

transform:scale(x, y);
  • 注意其中的 x 和 y 用逗号分隔。
  • transform:scale(1, 1) 宽度和高度都放大一倍，相当于没有放大。
  • transform:scale(2, 2) 宽度和高度都放大了两倍。
  • transform:scale(2) 只写一个参数，第二个参数则和第一个参数一样，相当于 scale(2, 2)。
  • transform:scale(0.5, 0.5) 缩小。
  • scale 缩放最大的优势：可以设置转换中心点缩放，默认以中心点缩放，而且不影响其他盒子。
    在这里插入图片描述
<!DOCTYPE html>
<html lang="zh-CN">
  <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 {
          width: 50px;
          height: 50px;
          border: 1px solid pink;
          margin: 200px auto;
      }
      div:hover {
        /* 1. 里面写的数字不跟单位 */
        transform: scale(3,3);
      }
      p {
        text-align: center;
      }
    </style>
  </head>
  <body>
    <div></div>
    scale不影响其他盒子，此句话不会被移动位置。
  </body>
</html>
图片缩放案例

在这里插入图片描述

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    div {
      overflow: hidden;
      float: left;
      margin: 10px;
    }
    div img {
      width: 300px;
      transition: all .4;
    }
    div img:hover {
      transform: scale(1.1);
    }
  </style>
</head>
<body>
  <div><a href="#"><img src="travel01.jpg" alt=""></a></div>
  <div><a href="#"><img src="travel02.jpg" alt=""></a></div>
  <div><a href="#"><img src="travel04.jpg" alt=""></a></div>
</body>
</html>
分页按钮缩放案例

在这里插入图片描述

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    li {
      float: left;
      width: 60px;
      height: 60px;
      border: 1px solid skyblue;
      margin: 10px;
      text-align: center;
      line-height: 60px;
      list-style: none;
      border-radius: 50%;
      cursor: pointer;
      transition: all 0.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>

2.6. 2D转换综合写法

  • 同时使用多个转换，其格式为：transform: translate() rotate() scale()... 等。
  • 其顺序会影响转换的效果。（先旋转会改变坐标轴方向）
  • 当我们同时有位移和其他属性的时候，记得要将位移放到最前面。
    在这里插入图片描述
<!DOCTYPE html>
<html lang="en">
<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;
      background-color: skyblue;
      margin: 100px auto;
      transition: all 1s;
    }
    div:hover {
      transform: translate(150px, 150px) rotate(180deg) scale(1.6);
    }
  </style>
</head>
<body>
  <div></div>
</body>
</html>
Anbelin
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
HTML+CSS 学习笔记
wc777777的博客
10-09 901
一、什么是html？ 超文本标记语言（英语：HyperText Markup Language，简称：HTML）是一种用于创建网页的标准标记语言。 您可以使用 HTML 来建立自己的 WEB 站点，HTML 运行在浏览器上，由浏览器来解析。 1. 网页的组成 网页的三要素：结构html，表现css，行为js 2. Html发展史 HTML1，而是1993年IETF团队的一个草案，并不是成型的标准。 HTML2.0，在1995年HTML有了第二版，即HTML2.0，当时是作为RFC1866发布的。 HTML3
HTML+CSS+JS+jQuery学习笔记
weixin_48778425的博客
10-08 475
HTML 一、基本标签 标题标签：<h1>标题标签</h1> 注释标签：<!-- --> 换行标签：<br/> 段落标签： <p>段落标签</p> 分隔线标签：<hr/> 加粗标签： <strong>加粗</strong> or <b>加粗</b> 倾斜标签： 倾斜 or &lt
形状变化html,图形变换的三种方式是什么？
weixin_32697149的博客
06-10 3366
图形变换的三种方式1、平移平移，是指在同一平面内，将一个图形上的所有点都按照某个直线方向做相同距离的移动，这样的图形运动叫做图形的平移运动，简称平移。平移不改变图形的形状和大小。图形经过平移，对应线段相等，对应角相等，对应点所连的线段相等。 它是等距同构，是仿射空间中仿射变换的一种。它可以视为将同一个向量加到每点上，或将坐标系统的中心移动所得的结果。即是说，若是一个已知的向量，是空间中一点，平移。...
HTML5+CSS3笔记 (黑马pink老师)
Ly
11-15 4230
HTML头部文件解释： <!-- 文档类型声明标签 告诉浏览器这个页面才取HTML5版本来显示页面 --> <!DOCTYPE html> <!-- lang:语言 en:英语 设置网页语言 --> <html lang="en"> <head> <!-- // charset:字符集 设置编码格式 --> <meta charset="UTF-8" /> <!-- 设置浏览器优先使用什么模
Web前端开发笔记——HTML和CSS
sjhcake的博客
02-27 1207
文章目录Web前端开发笔记技术构成一、HTML基础笔记1、基础概念：标签、元素、属性、文件结构1.1标签1.2元素1.3属性1.4文件结构2、标签2.1标题：h1~h62.2段落：p2.3段内换行：br2.4空格字符:` `2.5预留格式：pre2.6行内组合：span2.7水平线：hr2.8注释2.9超链接：a2.10插入图像：img标签2.11脚标标签：sup，sub2.12区域：div2.13无序列表：ul li2.15表格2.16表单：form2.16.1：文本框、密码框：input2.1
个人前端学习笔记 html5+css（保持更新）
qq_43769855的博客
07-07 816
个人前端学习知识（html5+css）
HTML+CSS笔记大全，之后会持续更新~
qwq_666的博客
07-23 831
HTML 第一个HTML页面 <!-- 1.这是HTML的注释 2.加上以下代码的第一行就表示HTML5语法，去掉就表示HTML4.0 3.HTML不区分大小写，语法松散不严格 --> <!doctype html> <!--根--> <html> <!--头--> <head> <!--网页标题，显示在网页左上角--> <title>网页的标题</title> </h
html+css
m0_55836496的博客
08-25 2178
HTML+CSS标签
HTML5+CSS笔记
Teddytjh的博客
06-26 446
HTML51.用于酷炫网站制。游戏开发（小，不卡，轻便，代码写的速度快）。移动开发。应用开发。地理定位2.优点①    跨平台PC。windows。IOS。Android都可用。②    兼容性③    世界知名浏览器厂商的支持（微软、Google、苹果、opera、Mozilla）（iOS不支持Java，Java有平台的限制，只需一个浏览器去解析就可用）3.什么是html5HTML+CSS+Ja...
css入门笔记
05-15
7.rem 相对于根元素(html,body)乘以倍数 8.% 相对单位 2.颜色单位（取值） 1.颜色英文单词 blue,red,green,yellow.... 2.rgb（r,g,b） r:red; g:green; b:blue; r,g,b:0-255 rgb(0-255,0-255,0-255) 3....
HTML中渲染空格和换行符样式的实现方式
程序人生
08-27 574
在HTML中，连续的空格和换行符会被合并为一个空格，所以无法直接通过添加换行符来实现缩进效果。如果您希望在HTML中显示缩进的效果，可以使用CSS样式中的。样式会保留文本中的所有空格和换行符，可能会导致额外的空白间距。如果您需要控制缩进的具体样式，可以使用CSS中的。样式，这样文本中的空格和换行符就会得到保留，从而实现了缩进的效果。上述代码中，我们将要显示的文本放置在。
前端知识HTML&CSS
最新发布
w13114的博客
08-31 636
前端知识
HTML5 为什么只需要写 ＜!DOCTYPE HTML＞
乐辞的博客
08-31 325
HTML5 不基于 SGML，因此不需要对 DTD 进行引用，但是需要 doctype 来规范浏览器的行为。而 HTML4.01 基于 SGML ,所以需要对 DTD 进行引用，才能告知浏览器文档所使用的文档类型。这个 DTD 提供了规范的文档结构和规则，以确保浏览器正确解析和显示文档。
HTML基本标签
actavy的博客
08-28 795
HTML（HyperText Markup Language）是超文本标记语言。它由一系列的元素（即标签）组成，每个标签都表示页面上的不同内容或元素，如文本、图像、链接等。HTML被用来描述网页的结构，并且在网页浏览器中解释显示这些结构，使网页内容呈现出来。标题标签的默认样式是自动加粗的，字体一级标题最大，六级标题最小，每个标题标签独占一行，并且标题标签是块元素。
HTML静态网页成品作业(HTML+CSS)——个人介绍网页(1个页面)
2301_78945238的博客
08-28 287
HTML静态网页成品作业(HTML+CSS)——个人介绍网页(1个页面)
html table tbody deleteRow有残留?
C201008的专栏
08-29 297
table移除多行不彻底的问题。
巧用 HTML 列表：＜ul＞、＜ol＞、＜dl＞的实用指南
前端基地
08-30 653
本文深入阐释 HTML 列表，涵盖无序列表、容豁级标签、有序列表、定义列表及多级列表等。丰富讲解与实际案例紧密结合，助力新手快速上手，让经验丰富者也能收获实用知识与技巧。为网页创作之路注入新活力，快来开启精彩的学习之旅。
HTML静态网页成品作业(HTML+CSS)——抗击疫情网页(4个页面)
2301_78945238的博客
08-29 341
HTML静态网页成品作业(HTML+CSS)——抗击疫情网页(4个页面)
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值