CSS3 平面 2D 变换+CSS3 过渡


个人主页:学习前端的小z
个人专栏:HTML5和CSS3悦读
本专栏旨在分享记录每日学习的前端知识和学习笔记的归纳总结,欢迎大家在评论区交流讨论!


文章目录

  • ✍一、CSS3 平面 2D 变换
    • 💎1 坐标轴
    • 💎2 transform 语法
    • 💎3 translate 平移
    • 💎4 rotate 旋转
    • 💎5 transform-origin 语法
    • 💎6 scale 缩放
    • 💎7 skew 倾斜
  • ✍二、CSS3 过渡

✍一、CSS3 平面 2D 变换

容许元素在 2D 平面上进行变换:

  • 平移(translate)
  • 旋转(rotate)
  • 缩放(scale)
  • 倾斜(skew)

💎1 坐标轴

在这里插入图片描述

💎2 transform 语法

在 2D 平面上进行变换是通过设置 transform 属性,语法格式如下:

transform: none|transform-functions;

代码示例:

transform: translate(20px, 30px) rotate(30deg) scale(3, 4) skew(20deg, 30deg);

💎3 translate 平移

对非置换的行内元素无效,比如span(inline)无效,img(虽然是inline,但是它是置换元素)有效。

transform不会脱离文档流,也不改变文档流的大小和位置。只是视觉上发生了变换。

translate()方法,根据左(X 轴)和顶部(Y 轴)位置给定的参数,从当前元素位置移动。

transform: translate(50px, 100px);
transform: translateX(50px);
transform: translateY(50px);

translate值(50px,100px)是从左边元素移动50个像素,并从顶部移动100像素。

💎4 rotate 旋转

rotate()方法,在一个给定度数顺时针旋转的元素。负值是允许的,这样是元素逆时针旋转。

transform: rotate(30deg);

rotate值(30deg)元素顺时针旋转30度。

如果先旋转,则会导致坐标轴发生改变,从而后面的变换根据已改变的坐标轴进行变换:

/*改变 translateX,发现它是水平移动,坐标轴并没有改变*/
transform: translateX(10px) rotate(45deg);/*改变 translateX,发现它是以改变的坐标轴进行移动,也就是斜角45deg往下走了*/
transform: rotate(45deg) translateX(10px);

💎5 transform-origin 语法

transform-origin属性允许您更改转换元素的位置。2D转换元素可以改变元素的X和Y轴。语法如下:

transform-origin: x-axis y-axis;
/*默认值是 x-axis:center y-axis: center*/

取值如下:

描述
x-axis定义视图被置于 X 轴的何处。可能的值:left、center、right、length、%
y-axis定义视图被置于 Y 轴的何处。可能的值:top、center、bottom、length、%

💎6 scale 缩放

scale()方法,该元素增加或减少的大小,取决于宽度(X 轴)和高度(Y 轴)的参数:

transform: scale(2, 3);transform: scaleX(2);
transform: scaleY(3);

scale(2,3)转变宽度为原来的大小的2倍,和其原始大小3倍的高度。

缩放用 >=0 数字

💎7 skew 倾斜

语法

transform:skew(<angle> [,<angle>]);

包含两个参数值,分别表示X轴和Y轴倾斜的角度,如果第二个参数为空,则默认为0,参数为负表示向相反方向倾斜。

  • skewX(<angle>);表示只在X轴(水平方向)倾斜。
  • skewY(<angle>);表示只在Y轴(垂直方向)倾斜。
transform: skew(30deg, 20deg);
transform: skewX(30deg);
transform: skewY(20deg);

skew(20deg,30deg) 元素在 X 轴倾斜 20 度和 Y 轴上倾斜 30 度。

✍二、CSS3 过渡

过渡(transition)是CSS3中具有颠覆性的特征之一,我们可以在不使用 Flash 动画或 JavaScript 的情况下,当元素从一种样式变换为另一种样式时为元素添加效果。

过渡动画: 是从一个状态(起始值) 渐渐的过渡到另外一个状态(终止值)

  • 0 ~ 100,100s,叫做过渡,里面存在一个速率

可以让我们页面更好看,更动感十足,虽然 低版本浏览器不支持(ie9以下版本) ,但是不会影响页面布局。

我们现在经常和 :hover 一起 搭配使用

transition: 要过渡的属性 花费时间 运动曲线 何时开始;
  • 属性 : 想要变化的 css 属性, 宽度高度 背景颜色 内外边距都可以 。如果想要所有的属性都变化过渡, 写一个all 就可以。
  • 花费时间: 单位是 秒(必须写单位) ,比如 0.5s
  • 运动曲线: 默认是 ease (可以省略)
  • 何时开始: 单位是 秒(必须写单位)可以设置延迟触发时间 默认是 0s (可以省略)

timing-function 曲线属性

在这里插入图片描述

描述
linear规定以相同速度开始至结束的过渡效果(等于 cubic-bezier(0,0,1,1))。
ease规定慢速开始,然后变快,然后慢速结束的过渡效果(cubic-bezier(0.25,0.1,0.25,1))。
ease-in规定以慢速开始的过渡效果(等于 cubic-bezier(0.42,0,1,1))。
ease-out规定以慢速结束的过渡效果(等于 cubic-bezier(0,0,0.58,1))。
ease-in-out规定以慢速开始和结束的过渡效果(等于 cubic-bezier(0.42,0,0.58,1))。
cubic-bezier(n,n,n,n)了解 cubic-bezier 函数中定义自己的值。可能的值是 0 至 1 之间的数值。

cubic-bezier 即为贝兹曲线中的绘制方法。图上有四点,P0-3,其中 P0、P3 是默认的点,对应了[0,0], [1,1]。而剩下的 P1、P2 两点则是我们通过 cubic-bezier()自定义的。cubic-bezier(x1, y1, x2, y2) 为自定义,x1,x2,y1,y2 的值范围在[0, 1]。

在这里插入图片描述

贝兹曲线调试网址:cubic-bezier

使用方法:在上面网址中选择想要的缓动效果(如:cubic-bezier(.17,.67,.84,.66)

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

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

相关文章

【Hadoop】下载安装及伪分布式集群搭建教程

目录 1.概述 2.环境准备 3.hadoop安装 3.1.下载安装配置 3.2.伪分布式集群 3.3.注意事项 4.Hadoop集群的组成 1.概述 hadoop有三种安装模式 单机模式&#xff0c;只在一台机器上运行&#xff0c;存储用的本地文件系统而不是HDFS。 伪分布式模式&#xff0c;存储采用HD…

HarmonyOS实战开发-录音机、如何实现音频录制和播放的功能

介绍 本示例使用audio相关接口实现音频录制和播放的功能&#xff0c;使用mediaLibrary实现音频文件的管理。 相关概念&#xff1a; AudioRecorder&#xff1a;音频录制的主要工作是捕获音频信号&#xff0c;完成音频编码并保存到文件中&#xff0c;帮助开发者轻松实现音频录…

3d里怎么让模型直接显示材质---模大狮模型网

在3D设计和渲染中&#xff0c;使模型直接显示材质是一个常见但也关键的需求。直接显示材质可以帮助设计师更直观地预览和编辑模型的外观&#xff0c;从而提高工作效率并确保最终效果符合预期。本文将介绍一些方法和技巧&#xff0c;帮助你在3D设计中实现模型直接显示材质的目标…

进口PFA容量瓶高纯透明聚四氟乙烯材质耐强酸碱PFA定容瓶

PFA容量瓶&#xff0c;也叫特氟龙容量瓶&#xff0c;是用于配制标准浓度溶液的实验室器皿&#xff0c;是有着细长颈、梨形肚的耐强腐蚀平底塑料瓶&#xff0c;颈上有标线&#xff0c;可直接配置标准溶液和准确稀释溶液以及制备样品溶液。 因其有着不易碎、材质纯净、化学稳定性…

Android广播之监听应用程序安装与卸载

&#x1f604;作者简介&#xff1a;小曾同学.com,一个致力于测试开发的博主⛽️&#xff0c; 如果文章知识点有错误的地方&#xff0c;还请大家指正&#xff0c;让我们一起学习&#xff0c;一起进步。&#x1f60a; 座右铭&#xff1a;不想当开发的测试&#xff0c;不是一个好测…

221 基于matlab编制的直齿圆柱齿轮应力计算程序

基于matlab编制的直齿圆柱齿轮应力计算程序&#xff0c;输入设计参数&#xff1a;模数、齿顶高、齿宽、啮合齿数、转速、扭矩、安全系数、压力角、齿轮类型&#xff08;开式、闭式&#xff09;等&#xff0c;输出弯曲应力和许用应力&#xff0c;并对比是否满足要求。并把程序成…

Eclipse新建类的时候如何自动添加注释

Eclipse新建类的时候如何自动添加注释 主要有两种方法&#xff1a;①创建类文件时自动添加注释&#xff1b;②文件注释 方法一&#xff1a;类注释 windows -> preferencesJava -> Code Style -> Code TemplatesCode -> new Java filesedit 填入下面的数据 ${fi…

在vue3中实现pptx、word、excel预览

插件推荐 PPTXjs vue-office 代码 <script setup lang"ts" name"home"> import { computed, nextTick, ref, onMounted } from vue; //引入VueOfficeDocx组件 import VueOfficeDocx from vue-office/docx; //引入VueOfficeExcel组件 import VueOf…

5-云原生监控体系-Grafana-使用配置文件实现自动化导入Dashboard

文章目录 1. 介绍(此文档使用的版本 grafana-enterprise-10.0.3-1)2. 清空之前的实验数据3. 使用配置文件方式配置 Datasource3.1. 创建配置文件3.2. 重启服务并检查是否生效4. 使用配置文件方式配置 Dashboard4.1. 创建配置文件5. 配置 Dashboard JSON 文件5.1. 下载 JSON 文…

解决CSS中鼠标移入到某个元素其子元素被遮挡的问题

我们在开发中经常遇到一种场景&#xff0c;就是给元素加提示信息&#xff0c;就是鼠标移入到盒子上面时&#xff0c;会出现提示信息这一功能&#xff0c;如果我们给盒子加了hover&#xff0c;当鼠标移入到盒子上时&#xff0c;让他往上移动5px&#xff0c;即transform: transla…

C/C++基础----数组和引入指针

数组 数组的定义 语法&#xff1a; 类型 变量名[数组大小] {数组内容1,数组内容2}; int array[5] {1,2,3,4,5};代码 int main(){// 定义数组&#xff0c;大小不写&#xff0c;数组内默认有多少元素大小就为多少int array_a[] {1, 2, 3, 4, 5, 6};// 定义数组长度为5&#x…

多线程小问题

多线程小问题 一:简述 wait 和 sleep 有什么区别&#xff1f;二:请说明Thread类中run和start的区别 一:简述 wait 和 sleep 有什么区别&#xff1f; 共同点&#xff1a; 都是使线程暂停一段时间的方法。 不同点&#xff1a; wait是Object类中的一个方法&#xff0c;sleep是Thr…

浅谈数据结构

1.前言 数据结构&#xff0c;就是一种程序设计优化的方法论&#xff0c;研究数据的逻辑结构和物理结构以及他们之间的关系&#xff0c;并对这种结构定义相应的运算&#xff0c;目的是加快程序的执行速度&#xff0c;减少占用的内存空间. 2.研究对象1--数据间的逻辑关系 数据…

蓝桥集训之三国游戏

蓝桥集训之三国游戏 核心思想&#xff1a;贪心 将每个事件的贡献值求出 降序排序从大到小求和为正是即可 #include <iostream>#include <cstring>#include <algorithm>using namespace std;typedef long long LL;const int N 100010;int a[N],b[N],c[N];…

【资料】华为硬件工程师手册与资料

资料目录&#xff1a; 华为硬件开发手册&#xff1a;1-159 华为数字电路&#xff1a;160-510 华为模拟电路&#xff1a;511-709 华为单板设计审查表&#xff1a;710-723 华为EMC资料&#xff1a;724-817 眼图知识简介&#xff1a;818-830 硬件工程师课程视频 硬件学习笔…

计算机基础知识-第10章-计算机网络概论

一、什么是计算机网络 计算机网络是指将地理位置不同的具有独立功能的多台计算机及其外部设备&#xff0c;通过通信线路连接起来&#xff0c;在网络操作系统&#xff0c;网络管理软件及网络通信协议的管理和协调下&#xff0c;实现资源共享和信息传递的计算机系统。 要注意不…

Vue开发注意事项

后端返回的Long型数据太长&#xff08;比如身份证号&#xff09;&#xff0c;部分数据可能被前端变为0 解决方法&#xff1a;Long变为String 使用delete发送请求时&#xff0c;用 ?参数值&参数值 的形式 export const deletepatient (id) > {// console.log(id)//返…

jenkins+sonar配置

安装插件 Sonar Scanner 用于扫描项目 配置sonar scanner jenkins集成sonar 1、sonar生成token 生成完保存好&#xff0c;刷新后无法查看 2、jenkins配置全局凭据 3、jenkins配置系统设置

商业智能-BI

商业智能&#xff08; Business Intelligence &#xff0c; BI &#xff09;是企业对商业数据的搜集、管理和分析的系统过 程&#xff0c;目的是使企业的各级决策者获得知识或洞察力&#xff0c;帮助他们做出对企业更有利的决策。 商业智能技术并不是基础技术或者产品技术&a…

pytorch 查看 GPU 型号

import torch# 检查CUDA是否可用 if torch.cuda.is_available():print("CUDA is available!")# 还可以获取CUDA设备的数量device_count torch.cuda.device_count()print(f"Number of CUDA devices: {device_count}")# 获取第一块GPU的信息device torch.d…