前端小白一文掌握 CSS3 2D转换transform

文章导读:AI 辅助学习前端,包含入门、进阶、高级部分前端系列内容,当前是 CSS 的部分,瑶琴会持续更新,适合零基础的朋友,已有前端工作经验的可以不看,也可以当作基础知识回顾。

CSS3 中的转化 transform 属性是 CSS 内容中很重要的一个知识点,用于对元素进行变换,包括平移、旋转、缩放、倾斜等。这些变换可以在不改变元素文档流位置的情况下改变元素的外观和位置,让网页能显示更加酷炫的效果。今天瑶琴带大家来学习或复习这些两个知识点。

transform 属性有 2D 和 3D 两种转换,本篇介绍 transform2D 的属性。

1.平移(Translate):

平移指移动元素的位置,可以沿着水平(X轴)和垂直(Y轴)方向进行。语法如下:


.element {transform: translate(X轴平移值, Y轴平移值);
}
//示例
/* 向右平移50像素,向下平移20像素 */
.box {transform: translate(50px, 20px);
}
/* 向右平移50像素,垂直方向保持不变 */
.element {transform: translateX(50px);
}
/* 向下平移20像素,水平方向保持不变 */
.element {transform: translateY(20px);
}

2.旋转(Rotate):

旋转元素,使其围绕指定点旋转一定角度。语法如下:

.element {transform: rotate(旋转角度);
}
//示例
/* 顺时针旋转30度 */
.img {transform: rotate(30deg);
}
/* 仅水平方向顺时针旋转30度 */
.element {transform: rotate(30deg);
}
/* 仅垂直方向顺时针旋转30度 */
.element {transform: rotate(30deg);transform-origin: center bottom;
}

3.缩放(Scale):

缩放元素,可以放大或缩小元素的尺寸。语法如下:

.element {transform: scale(X轴缩放因子, Y轴缩放因子);
}
//示例
/* 水平方向缩小为原来的一半,垂直方向放大为原来的1.5倍 */
.icon {transform: scale(0.5, 1.5);
}
/* 仅水平方向放大为原来的1.5倍,垂直方向保持不变 */
.element {transform: scaleX(1.5);
}
/* 仅垂直方向缩小为原来的0.8倍,水平方向保持不变 */
.element {transform: scaleY(0.8);
}

4.倾斜(Skew):

倾斜元素,使其在水平和垂直方向上倾斜一定角度。语法如下:

.element {transform: skew(X轴倾斜角度, Y轴倾斜角度);
}
//示例
/* 水平方向倾斜30度,垂直方向不倾斜 */
.text {transform: skew(30deg, 0deg);
}
/* 仅水平方向倾斜30度,垂直方向保持不变 */
.element {transform: skewX(30deg);
}
/* 仅垂直方向倾斜30度,水平方向保持不变 */
.element {transform: skewY(30deg);
}

5.组合变换:

你可以组合多个变换来同时应用于一个元素。多个变换可以通过空格分隔。示例:

/* 先向右平移50像素,然后顺时针旋转30度 */
.element {transform: translate(50px) rotate(30deg);
}

完整代码示例:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>CSS Transform Examples</title><style>.element {width: 100px;height: 100px;background-color: #3498db;margin: 20px;display: inline-block;transition: transform 0.3s ease; /* 添加平滑的过渡效果 */}/* 平移示例 */.translate-x {transform: translateX(50px);}.translate-y {transform: translateY(20px);}/* 旋转示例 */.rotate {transform: rotate(30deg);}/* 缩放示例 */.scale-x {transform: scaleX(1.5);}.scale-y {transform: scaleY(0.8);}/* 倾斜示例 */.skew-x {transform: skewX(30deg);}.skew-y {transform: skewY(30deg);}</style>
</head>
<body><div class="element translate-x">平移-X</div><div class="element translate-y">平移-Y</div><div class="element rotate">旋转</div><div class="element scale-x">缩放-X</div><div class="element scale-y">缩放-Y</div><div class="element skew-x">倾斜-X</div><div class="element skew-y">倾斜-Y</div>
</body>
</html>

以上就是 CSS3 中关于转换 transform2D 的知识点,上面的示例,初学者可以粘贴到 HTML 文件中并在浏览器中运行,以查看不同的转换效果。

希望今天的内容对初学前端的朋友有所帮助。也希望每一个初学者都能成为一个优秀的前端开发工程师,加油。

最后啰嗦一句,好记性不如烂笔头,希望大家在学习的过程中养成做笔记的习惯,形成自己的知识体系。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/diannao/10686.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

设计模式-结构型-桥接模式-Bridge

桥接模式可以减少类的创建 矩阵类 public class Matrix {private String fileName;public Matrix(String fileName) {this.fileName fileName;}public String getFileName() {return fileName;} } 图片抽象类 public abstract class Image {protected ImageImp imp;public …

黄芪党参茶

黄芪党参茶是一种传统的中药茶饮&#xff0c;由黄芪和党参两味药材煮制而成。这种茶饮在中医理论中被认为具有补中益气、调理脾胃、利水消肿、养血安神等多种功效。 主要功效 补中益气&#xff1a;黄芪和党参都具有补中益气的功效。黄芪味甘、性微温&#xff0c;有补气固表的…

常见算法策略

前言 算法策略是指在解决问题或完成任务时所采用的方法、技巧或步骤的总称。 在设计算法时&#xff0c;通常会考虑多种策略&#xff0c;并选择最适合特定问题的策略来实现算法的设计和优化。 算法策略比较 动态规划 动态规划介绍入口

基于协同过滤算法的旅游推荐系统的设计

基于协同过滤算法的旅游推荐系统的设计 Design of a Travel Recommendation System based on Collaborative Filtering Algorithm 完整下载链接:基于协同过滤算法的旅游推荐系统的设计 文章目录 基于协同过滤算法的旅游推荐系统的设计摘要第一章 前言1.1 研究背景1.2 研究目的…

动手学深度学习16 Pytorch神经网络基础

动手学深度学习16 Pytorch神经网络基础 1. 模型构造2. 参数管理1. state_dict()2. normal_() zeros_()3. xavier初始化共享参数的好处 3. 自定义层4. 读写文件net.eval() 评估模式 QA 1. 模型构造 定义隐藏层–模型结构定义前向函数–模型结构的调用 import torch from torch…

dom驱动和数据驱动的理解

DOM&#xff08;Document Object Model&#xff09;驱动和数据驱动在前端开发中扮演着不同的角色&#xff0c;它们各自有其独特的特性和应用场景。 DOM驱动&#xff1a; DOM&#xff08;文档对象模型&#xff09;驱动是传统的前端开发模式。在这种模式下&#xff0c;开发人员…

Spark读取Hive数据或文件如何提升速度的优化思路

场景描述 场景一&#xff1a;数据不均匀&#xff0c;个别task获取的数据比其他Task多&#xff0c;导致单个Task或几个Task执行很慢。场景二&#xff1a;数据均匀&#xff0c;但是每个Task数据量都很多&#xff0c;执行时间达不到预期。 解决思路 读取前优化&#xff1a;优化…

Xilinx 千兆以太网TEMAC IP核 MDIO 配置及物理接口

基于AXI4-Lite接口可以访问MDIO(Management Data Input/Output)接口&#xff0c;而MDIO接口连接MAC外部的PHY芯片&#xff0c;用户可通过AXI4-Lite接口实现对PHY芯片的配置。 1 MDIO接口简介 开放系统互连模型OSI的最低两层分别是数据链路层和物理层&#xff0c;数据链路层的…

联丰策略股票炒股APP市场这些板块爆发!A股后市怎么走?

查查配5月10日,A股三大指数涨跌不一。 联丰策略拥有一支由知名互联网公司和国内证券金融机构的行业专家组成的一流运营团队。凭借他们在互联网产品开发和金融风险管理方面的丰富经验,我们的团队致力于为客户提供专业和个性化的证券交易服务。 截至收盘,沪指涨0.01%,报3154.55点…

Linux 网络时间校准

随笔 目录 1. ntp 校验 2. timedatectl 命令来进行时间同步 2.1 安装 Chrony 软件包 2.2 编辑Chrony的配置文件/etc/chrony.conf&#xff0c;选择你想要同步的NTP服务器 2.3 确认Chrony服务已经启动 2.4 命令查看系统时间与NTP服务器的同步情况 1. ntp 校验 1. 确保你的…

leetcode-矩阵最长递增路径-102

题目要求 思路 1.通过双循环去把每一个结点作为起始点进行统计&#xff0c;将返回的路径长度存放在res中&#xff0c;取最大的res的长度。 2.递归中需要的几个值&#xff0c;x和y当前结点的坐标&#xff0c;pre用于存储上一个结点的元素值&#xff0c;因为要求是路径上的元素是…

8. SVG的填充和描边

在SVG中&#xff0c;fill和stroke属性是用来控制图形的填充和描边的。下面我将分别详细介绍这两个属性及它们的衍生属性。 Fill 属性&#xff08;填充&#xff09; 应用场景 绘制实心图形&#xff1a;如圆形、矩形、多边形等的内部填充。用于表示实体对象、区域等&#xff0…

【TC3xx芯片】TC3xx芯片电压监控和温度监控

目录 前言 正文 1.电压监控 1.1电压监控功能概述 1.2电压监控配置过程

FreeRtos内核源码分析(九)——协程

目录 一、协程简介 二、协程工作机制 2.1 协程控制块结构 2.2 协程管理方式 2.3 协程调度方式 2.4 协程通信机制 三、协程状态及状态切换 3.1 协程状态 3.2 状态切换 四、协程创建 五、协程调度分析 5.1 源码分析 5.2 逻辑图分析 六、协程通信 6.1 协程发送消息…

通过acl设置阻止数据包通过

实验拓扑和信息如图&#xff08;配置信息参考上一章内容&#xff09; acl设置代码 AR4 系统是视图下 acl 2000 rule 5 deny source 10.10.10.1 0 接口0视图下 数据接收时 traffic-filter inbound acl 2000 测试结果

java中的并发同步方法

1、synchronized Object类的同步方法&#xff1a;wait()&#xff0c;notify() 2、Lock和Condition Lock是一个接口&#xff0c;实现类有ReentrantLock、ReentrantReadWriteLockCondition类的同步方法&#xff1a;await()&#xff0c;signal() 3、LockSupport LockSupport的…

javatest

day4 2. public class test {public static void main(String[] args) {Scanner sc new Scanner(System.in);System.out.println("**************");System.out.println("存期 年利率");System.out.println("一年 2.25");System.ou…

Chromium编译指南2024 Windows11篇-编译前的准备工作和Visual Studio安装(一)

前言 在这个数字化快速发展的时代&#xff0c;浏览器不仅是我们获取信息的窗口&#xff0c;更是开发者表达创意和技术实力的舞台。 Chromium是由Google于2008年发起的开源浏览器项目&#xff0c;致力于为用户提供更快、更安全、更稳定的网页浏览体验。 其作为开源浏览器项目…

实验八 Linux虚拟内存 实验9.1:统计系统缺页次数成功案例

运行环境&#xff1a; VMware17.5.1 build-23298084Ubuntu 16.04LTS ubuntu版本下载地址Linux-4.16.10 linux历史版本下载地址虚拟机配置&#xff1a;硬盘一般不少于40G就行 内核版本不同内核文件代码也有出入&#xff0c;版本差异性令c文件要修改&#xff0c;如若要在linux6.7…

指针(5)加油吧

指针&#xff08;5&#xff09; 拿冒泡排序来举例&#xff1a; 1 .qsort void qsort (void* base,//base指向待排序数组的首元素的指针size_t num,//base指向数组中元素的个数size_t size,//base指向的数组中的一个元素的大小&#xff0c;单位是字节int(*cmp)(const void*,co…