33.前端笔记-CSS3-2D转换

已于 2022-12-21 14:00:11 修改
阅读量289 收藏
点赞数
分类专栏： 前端-css 文章标签： css3 前端 css
于 2022-12-20 23:01:07 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Ambition_ZM/article/details/128389291
版权

目录

1、转换

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

2、二维坐标系

2.1 2D转换之移动translate

作用：改变元素在页面中的位置，与定位类似

单位是px,也可以直接写百分比
transform:translate(x,y);
或者
transform:translateX(n);
transform:translateY(n);

特点:

  • 移动不会影响其他盒子的位置，自身不脱标
  • translate中的百分比单位是相对于自身元素的translate:(50%,50%)，比如当前盒子width=100px,就移动50px
  • 对行内标签无效
<!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>
        div:first-child {
            width: 100px;
            height: 100px;
            background-color: aquamarine;
            transform: translate(50%, 50px);
        }
        div:last-child {
            width: 100px;
            height: 100px;
            background-color: orange;
        }
    </style>
</head>
<body>
    <div>1</div>
    <div>2</div>
</body>
</html>

在这里插入图片描述
应用：将盒子居中，与position搭配使用

<!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>
        .father{
            position: relative;
            width: 250px;
            height: 250px;
            background-color: greenyellow;
        }
        .son{
            position: absolute;
            top:50%;
            left: 50%;
            width: 100px;
            height: 100px;
            background-color: orange;
            transform: translate(-50%,-50%);
        }
    </style>
</head>
<body>
    <div class="father">
        <div class="son"></div>
    </div>
</body>
</html>

在这里插入图片描述

2.2 2D旋转之rotate

transfrom:rotate(度数)

说明：

  • 度数单位是deg
  • 角度为正数，顺时针。负数，逆时针
  • 默认旋转的中心点是元素的中心点
使用transform-origin:x y;指定转换中心点
注意：
（1）x和y中间用空格分开
（2）x y默认转换的中心点是元素的中心点:transform-orgin:50% 50%
（3）还可以给x y设置像素px或方位名词top bottom left right center

练习1

小狗转圈：

<!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>
    img{
        width: 100px;
        border-radius: 50px;
        transition: all 0.2s;
    }
    div{
        width: 100px;
        height: 100px;
        border-radius: 50px;
        border: 2px orange solid;
    }
    img:hover{
        transform: rotate(45deg);
    }
</style>
</head>
<body>
    <div>
        <img src="../images/猛男.jpg" alt="">
    </div>
</body>
</html>

小狗歪头

练习2

改变中心点：

<!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>
        div{
            width: 100px;
            height: 100px;
            margin: 0 auto;
            background-color: orange;
            /* 可以跟方位名词 */
            transform-origin: left bottom;
            
        }
        div:hover{
            transform: rotate(45deg);
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

旋转2

练习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>
        div{
            width: 100px;
            height: 100px;
            margin: 0 auto;
            border: 1px orange solid;
            overflow: hidden;
        }
        div::after{
            content: '';
            display: block;
            width: 100%;
            height: 100%;
            background-color: chartreuse;
            /* 可以跟方位名词 */
            transform-origin: left bottom;
            transform: rotate(90deg);
            border-radius: 50%;
            transition: all 0.5s;
        }
        div:hover::after{
            transform: rotate(0deg);
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

旋转案例3

2.3 2D转换之缩放scale

放大和缩小元素

transform:scale(x,y);
说明：
1、x和y没有单位，是倍数的意思。1就是1倍不变，2就是2倍
2、只写一个参数，就代表等比缩放
3、参数值小于1就是缩小
4、scale优势：
不影响其他盒子，可以设置缩放中心点transfor-origin

练习1

<!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>
        div{
            width: 100px;
            height: 100px;
            background-color: orange;
            margin: 0 auto;
            
        }
        div:hover{
            transform: scale(2,2);
        }
    </style>
</head>
<body>
    <div></div>
    其他盒子
</body>
</html>

缩放1

练习2

小狗缩放时，不出边框

<!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>
        div{
            float: left;
            margin: 10px;
            width: 100px;
            height: 100px;
            overflow: hidden;
            border-radius: 50%;
        }
        div img{
            width: 100px;
            transition: all 3;
            border-radius: 50%;
        }
        div img:hover{
            transform: scale(1.5);
        }
    </style>
</head>
<body>
    <div><a href=""><img src="../images/猛男.jpg" alt=""></a></div>
    <div><a href=""><img src="../images/猛男.jpg"></a></div>
    <div><a href=""><img src="../images/猛男.jpg"></a></div>
</body>
</html>

缩放2

2D转换综合写法

  • 同时使用多个转换，其格式为:
transform:translate()  rotate()  scale()
  • 书写顺序会影响转换效果，先旋转会改变坐标轴方向
  • 当同时有位移和其他属性时，要将位移放到最前面

转换综合练习

鼠标经过小狗时，边移动边放大

<!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>
        div{
            float: left;
            margin: 10px;
            width: 100px;
            height: 100px;
            overflow: hidden;
            border-radius: 50%;
            /* transform-origin: (left bottom); */
        }
        div img{
            /* transform-origin: (left bottom); */
            width: 100px;
            transition: all 3;
            border-radius: 50%;
        }
        div img:hover{
            transform: translate(50px) scale(1.5);
        }
    </style>
</head>
<body>
    <div><a href=""><img src="../images/猛男.jpg" alt=""></a></div>
    <div><a href=""><img src="../images/猛男.jpg"></a></div>
    <div><a href=""><img src="../images/猛男.jpg"></a></div>
</body>
</html>

转换综合练习

MY Daisy
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
《web开发： CSS3 2D转换》
yexiangCSDN的专栏
01-25 202
一、CSS3 2D转换 转换（transform）是CSS3中具有颠覆性的特征之一，可以实现元素的位移、旋转、缩放等效果，转换（transform）你可以简单理解为变形 移动：translate 旋转：rotate 缩放：scale 1. 二维坐标系 2D转换是改变标签在二维平面上的位置和形状的一种技术，先来学习二维坐标系 4.2 2D 转换之移动 translate 2D移动是2D转换里面的一种功能，可以改变元素在页面中的位置，类似定位 1. 语法 transform: tra..
二维图形平移变换java程序_【JS图形学基础】二维图形学的变换
weixin_29288653的博客
02-25 189
二维图形学的变换使用过前端的css3，canva,svg的小伙伴应该对平移，旋转，缩放，剪切这些效果变换应该很熟悉了，但应该大部分小伙伴应该不清楚其中的原理，在二维图形方面如果能熟练使用图形学的基础算法，结合canva,svg会有意想不到的惊喜。计算机图形学中的应用非常广泛的变换是一种称为仿射变换的特殊变换，在仿射变换中的基本变换包括平移、旋转、缩放、剪切这几种。平移设某点向x方向移动dx,y方向...
2D坐标系下的点的转换矩阵（平移、缩放、旋转、错切）
关注工业机器人应用
10-17 1822
有了以上平移、旋转、缩放和错切矩阵后，我们就可以通过矩阵乘法求得二维平面上点P任意变换后坐标。帮助理解反向计算转换矩阵，该问描述的是正向的变换。
二维坐标基本变换（平移、旋转、缩放、镜像、阵列）
热门推荐
Akiyama_sou的博客
12-25 1万+
诸如图像、模型等的基本变换，实际上都是点坐标的变换，通过矩阵，可以非常方便的达到这个目的。在下文仅介绍二维坐标变换原理。 首先，定义点类如下： //定义点类，亦可表示向量 class vec2 { public: float v[2];//v[0]为横坐标，v[1]为纵坐标 vec2(){} ~vec2(){} //构造函数，例vec2 p(0,0);表示构造p点坐标为（0,0） vec2(const float &x, const float &y){v[0] = x; v
学习3D《1、二维坐标系下的平移旋转缩放》
傻大专栏
05-10 3283
各位看官，俗话说：火车不是推滴，牛皮不是吹滴。没有扎实的基础知识，再高的摩天大楼也是会倒滴，我们还是一步两个脚印吧^_^ 话说当年笛卡尔坐标系创世之初，那场面也是惊天地，泣鬼神，以至于让我们这些小虾米下了一十八层地域。 那么我们就先从二维中的平移开始说起： 平移： 假设M是原点为(0,0)的坐标系，N是原点为(2,2)的坐标系，点P(px,py)是M中的一点，那么点P在N中的坐标P‘是多少
移动端笔记 平面转换2D
03-09
移动端笔记 平面转换2D
CSS3学习笔记.pdf
04-29
### CSS3 学习笔记知识点总结 #### 一、CSS3 简介 - **定义**：CSS3，即层叠样式表第三版，是Web前端开发中的一个重要组成部分，用于控制网页元素的布局和外观。 - **特性**：与CSS2相比，CSS3提供了更多功能强大的...
html css js网页制作实例processing-开发笔记p
06-21
CSS3还引入了更多高级特性，如媒体查询（Media Queries）用于响应式设计，以及过渡（Transitions）、动画（Animations）和3D转换等增强视觉效果的技术。 JavaScript是网页的动态功能引擎，允许用户与网页进行交互。...
2D文字与3D图像粒子转换动画特效.rar
10-01
本资源"2D文字与3D图像粒子转换动画特效.rar"提供了一种独特的技术，结合了2D文字与3D图像粒子的转换，为网页增添动态美感。这个特效不仅能够吸引用户注意力，还能在一定程度上提升网站或应用的交互性。 首先，我们...
HTML&CSS基础自学笔记---实现静态网页
10-30
2D和3D转换如`translate`、`rotate`等，可增加视觉吸引力。 Webstorm作为一个强大的开发工具，提供了许多快捷键以提高开发效率，如`Ctrl+D`快速复制当前行，`Ctrl+X`快速删除当前行，`Ctrl+Alt+T`在选中的文本前后...
【前端学习-03】CSS3之2D转换/移动/旋转/缩放
QNANWang的博客
05-04 380
2D转换 实现元素（盒子）的位移、旋转、缩放 2D转换:改变标签在二维平面上的位置和形状的一种技术，与数学的坐标轴不一样 1.2D转换移动Translate 改变元素在页面中的位置，类似定位。 语法：transform:translate(x,y) X为x轴上移动的位置，Y为Y轴移动位置 若只移动X轴或Y轴，Y不能省略 transfrom：translate(100px,0px) transfr...
p361旋转中心
shanshanerchuan的博客
11-14 201
p361旋转中心 代码： <!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{
移动web前端基础知识二(部分)
qq_53172414的博客
07-18 72
3D 坐标系比2D 多了一个Z轴如图: X 轴 往右越大，是正值， 否则反之Y 轴 往下越大，是正值，否则反之Z轴 （指向我们）越大，是正值，否则反之完整写法:transform: translate3d(x, y, z);分开写:1.大拇指指向X轴正向方（右）， 则四指指向的方向是旋转的方向2.大拇指指向Y轴正向方（下）， 则四指指向的方向是旋转的方向 让子盒子在父盒子内有空间的展示，此时可以给父亲添加特点:动画最大的特点可以不用鼠标触发，自动的，反复的执行某些动画1.定义动画@keyframes dan
修改了原神4.8版本升级数据表
最新发布
lulei5153的博客
08-18 156
【代码】修改了原神4.8版本升级数据表。
JAVA-WEB资源配置
caryeko的专栏
08-15 218
用JAVA进行编写WEB项目时，我们一般需要对WEB进行统一配置，例如制定拦截路径、页面解析器、跨域配置、fastjson报文解析、文件上传大小配置等。
使用WebSocket实现一个简易的聊天室
qq_51321722的博客
08-14 451
其次，要有相关配置类以及Controller。我这里的框架是SpringBoot。首先，我们要有一个前端页面。
pywebview 入门
小小宾的博客
08-18 532
pywebview 是一个轻量级的 python 库，旨在简化桌面应用程序的开发。它利用系统的 WebView 组件，使得开发人员可以使用现代 Web 技术（HTML、CSS、JavaScript）来创建用户界面，同时使用 python 处理业务逻辑。pywebview 使得创建跨平台桌面应用程序变得更加简单和高效。
使用 TinyVue 组件库搭建前端项目的实操体验
Echo_Wish的博客
08-14 819
在这个示例中，我们创建了一个包含用户名和密码输入框的表单，并添加了表单验证功能。总的来说，TinyVue 组件库为前端开发提供了强大的支持和便利。通过这次活动，我不仅提升了自己的开发技能，还对 OpenTiny 的产品有了更深入的了解。在这个示例中，我们引入了 TinyButton 组件，并在按钮点击时触发一个成功消息。TinyVue 组件库提供了丰富的 UI 组件，可以满足各种业务需求。在项目中，我使用了 TinyVue 提供的多个组件来构建页面。首先，我按照官方文档的指引，完成了开发环境的准备工作。
HTML5+CSS3+JS前端开发学习笔记
CSS3的布局技巧，如浮动、行内块的运用、三角形制作、sprites技术和滤镜，以及过渡、2D和3D转换、动画等，为实现动态效果提供了理论支持。 JavaScript基础部分涵盖了运算符、类型转换、对象、JSON、函数、原型、...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值