百度360必应搜狗淘宝本站头条
当前位置:网站首页 > 技术文章 > 正文

HTML/CSS 备忘录 - 13. CSS3 变换/过渡/动画

myzbx 2025-03-06 17:41 17 浏览

一、2D 变换

1. 2D 位移

/* x 轴方向位移 30px */
transform: translateX(30px);
/* 分别设置 x 轴与 y 轴的位移 */
transform: translateX(30px) translateY(40px);
/* 同时设置 x 与 y 的方向位移 */
transform: translate(-50%, -50%);
  • 位移与相对定位很相似,都不脱离文档流,不会影响到其它元素。
  • 与相对定位的区别:相对定位的百分比值,参考的是其父元素;位移的百分比值,参考的是其自身。
  • 浏览器针对位移有优化,与定位相比,浏览器处理位移的效率更高。
  • 位移对行内元素无效。

位移配合定位,可实现元素水平垂直居中:

.box {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

2. 2D 旋转

设置旋转角度,需指定一个角度值(deg),正值顺时针,负值逆时针。

/* 顺时针旋转 30 度 */
transform: rotate(30deg);
/* 逆时针旋转 30 度 */
transform: rotate(-30deg);

3. 2D 缩放

设置水平或垂直方向的缩放比例,值为一个数字, 1 表示不缩放,大于 1 放大,小于 1 缩小。

/* 水平方向放到两倍 */
transform: scaleX(2);
/* 垂直方向缩小到 0.5 倍 */
transform: scaleY(0.5);

/* 同时设置水平方向、垂直方向的缩放比例 */
/* 一个值代表同时设置水平和垂直缩放 */
transform: scale(0.5);
/* 两个值分别代表:水平缩放、垂直缩放 */
transform: scale(2, 3);

借助缩放,可实现小于 12px 的文字。

4. 2D 扭曲

/* 设置元素在水平方向扭曲,值为角度值,
会将元素的左上角、右下角拉扯 */
transform: skewX(30deg);
/* 设置元素在垂直方向扭曲 */
transform: skewY(20deg);
/* 同时设置水平与垂直方向扭曲 */
transform: skew(30deg, 20deg);

5. 修改变换原点

  • 元素变换时,默认的原点是元素的中心,使用 transform-origin 可以设置变换的原点。
  • 修改变换原点对位移没有影响, 对旋转和缩放会产生影响。
  • 如果提供两个值,第一个用于横坐标,第二个用于纵坐标。
  • 如果只提供一个,若是像素值,表示横坐标,纵坐标取 50%;若是关键词,则另一个坐标取 50%。
/* 变换原点在元素的中心位置,百分比是相对于自身。默认值 */
transform-origin: 50% 50%;
/* 变换原点在元素的左上角 */
transform-origin: left top;
/* 变换原点距离元素左上角 50px 50px 的位置 */
transform-origin: 50px 50px;
/* 只写一个值的时候,第二个值默认为 50% */
transform-origin: 0;

6. 多重变换

多个变换,可以同时使用一个 transform 来编写。

transform: translate(-50%, -50%) rotate(45deg);

二、3D 变换

重要原则:元素进行 3D 变换的首要操作是,父元素必须开启 3D 空间!

/* 让子元素位于此元素的二维平面内(2D 空间),默认值 */
transform-style: flat;
/* 让子元素位于此元素的三维空间内(3D 空间) */
transform-style: preserve-3d;

1. 设置景深

指定观察者与 z=0 平面的距离,能让发生 3D 变换的元素,产生透视效果,看来更加立体。

/* 不指定透视,默认值 */
perspective: none;
/* 指定观察者距离 z=0 平面的距离,不允许负值 */
perspective: 100px;

perspective 设置给发生 3D 变换元素的父元素。

2. 透视点位置

所谓透视点位置,就是观察者位置;默认的透视点在元素的中心。

/* 相对坐标轴往右偏移 400px, 往下偏移 300px */
perspective-origin: 400px 300px;
perspective-origin: center;
perspective-origin: bottom right;
perspective-origin: 500% 200%;

设置给发生 3D 变换元素的父元素。

3. 3D 位移

3D 位移是在 2D 位移的基础上,可以让元素沿 z 轴位移。

/* 设置 z 轴位移,需指定长度值,
正值向屏幕外,负值向屏幕里,且不能写百分比 */
transform: translateZ(50px);
/* 第 1 个参数对应 x 轴,第 2 个参数对应 y 轴,
第 3 个参数对应 z 轴,且均不能省略。*/
transform: translate3d(100px, 200px, 300px);

4. 3D 旋转

3D 旋转是在 2D 旋转的基础上,可以让元素沿 x 轴和 y 轴旋转。

/* 设置 x 轴旋转角度,需指定一个角度值(deg) */
transform: rotateX(20deg);
/* 设置 y 轴旋转角度,需指定一个角度值(deg) */
transform: rotateY(20deg);
/* 前 3 个参数分别为 x,y,z 方向的矢量(0~1),
原点到该点的连线即为旋转轴,
第 4 个参数表示旋转的角度 */
transform: rotate3d(1, 1, 1, 30deg)

5. 3D 缩放

3D 缩放是在 2D 缩放的基础上,可以让元素沿 z 轴缩放。

/* 设置 z 轴方向的缩放比例 */
transform: scaleZ(4);
/* 分别设置 x,y,z 轴的缩放比例,参数不允许省略 */
transform: scale3d(2, 3, 4);

6. 修改变换原点

/* 变换原点在元素的中心位置,百分比是相对于自身。默认值 */
transform-origin: 50% 50% 0;
transform-origin: 50% 50% 30px;

7. 设置元素背面可见性

backface-visibility 需要加在发生 3D 变换元素的自身上。

/* 指定元素背面可见,允许显示正面的镜像。默认值 */
backface-visibility: visible;
/* 指定元素背面不可见 */
backface-visibility: hidden;

8. 3D 变换示例

1
2
3
4
5
6
.cube {
  width: 100px;
  height: 100px;
  transform-style: preserve-3d;
  perspective: 300px;
  perspective-origin: 150% 150%;
}

.face {
  position: absolute;
  width: 100px;
  height: 100px;
  
  line-height: 100px;
  font-family: sans-serif;
  font-size: 60px;
  color: white;
  text-align: center;

  backface-visibility: visible;
}

.front {
  background: rgba(0, 0, 0, 0.3);
  transform: translateZ(50px);
}
.back {
  background: rgba(0, 255, 0, 1);
  color: black;
  transform: rotateY(180deg) translateZ(50px);
}

.right {
  background: rgba(196, 0, 0, 0.7);
  transform: rotateY(90deg) translateZ(50px);
}

.left {
  background: rgba(0, 0, 196, 0.7);
  transform: rotateY(-90deg) translateZ(50px);
}

.top {
  background: rgba(196, 196, 0, 0.7);
  transform: rotateX(90deg) translateZ(50px);
}

.bottom {
  background: rgba(196, 0, 196, 0.7);
  transform: rotateX(-90deg) translateZ(50px);
}

三、过渡

  • transition-property:定义哪个属性需要过渡,只有在该属性中定义的属性(比如宽、高、颜色等)才会以有过渡效果。
  • transition-duration:设置过渡的持续时间。
  • transition-delay:指定开始过渡的延迟时间。
  • transition-timing-function:设置过渡的类型。
  • transition:过渡复合属性。
/* 不过渡任何属性 */
transition-property: none;
/* 过渡所有能过渡的属性 */
transition-property: all;
/* 过渡具体的属性 */
transition-property: width, heigth;

/* 没有任何过渡时间,默认值 */
transition-duration: 0;
/* 过渡时间为 1s */
transition-duration: 1s;
/* 过渡时间为 500ms */
transition-duration: 500ms;
/* 不同的属性设置不同的过渡时间 */
transition-property: width, height, opacity;
transition-duration: 0.5s, 1s, 0.3s;

/* 设置开始过渡的延迟时间 */
transition-delay: 1s;

/* 平滑过渡,默认值 */
transition-timing-function: ease;
/* 匀速过渡 */
transition-timing-function: linear;
/* 加速过渡 */
transition-timing-function: ease-in;
/* 减速过渡 */
transition-timing-function: ease-out;
/* 先加速再减速过渡 */
transition-timing-function: ease-in-out;
/* 自定义的贝塞尔曲线函数 */
transition-timing-function: cubic-bezier(0.42, 0, 0.58, 1);

/* 通过复合属性设置过渡,第一是 duration,第二个是
delay,其他值没有顺序要求。*/
transition:1s 1s linear all;
/* 分别设置不同属性的过渡 */
transition: width 2s, height 2s, transform 2s;

在线制作贝赛尔曲线:https://cubic-bezier.com/

四、动画

1. 定义动画及关键帧

/* 简单方式定义动画及关键帧 */
@keyframes myfirst
{
    from {background: red;}
    to {background: yellow;}
}

/* 完整方式定义动画及关键帧 */
@keyframes myfirst
{
    0%   {background: red;}
    25%  {background: yellow;}
    50%  {background: blue;}
    100% {background: green;}
}

2. 元素应用动画

  • animation-name:给元素指定具体的动画
  • animation-duration:设置动画所需时间
  • animation-delay:设置动画延迟
  • animation-timing-function:设置动画的类型,同过渡
  • animation-iteration-count:指定动画的播放次数
  • animation-direction:指定动画方向
  • animation-fill-mode:设置动画之外的状态
  • animation-play-state:设置动画的播放状态
  • animation:动画复合属性
/* 指定动画 */
animation-name: testKey; 
/* 设置动画所需时间 */ 
animation-duration: 5s; 
/* 设置动画延迟 */ 
animation-delay: 0.5s;

/* 播放指定次数 */
animation-iteration-count: 3;
/* 无限循环播放 */
animation-iteration-count: infinite;

/* 设置动画方向,正常方向 (默认) */
animation-direction: normal;
/* 设置动画方向,反方向运行 */
animation-direction: reverse;
/* 设置动画方向,动画先正常运行再反方向运行,并持续交替运行 */
animation-direction: alternate;
/* 设置动画方向,动画先反运行再正方向运行,并持续交替运行 */
animation-direction: alternate-reverse;

/* 设置对象状态为动画结束时的状态 */
animation-fill-mode: forwards;
/* 设置对象状态为动画开始时的状态 */
animation-fill-mode: backwards;

/* 设置动画的播放状态, 运动 (默认) */
animation-play-state: running;
/* 设置动画的播放状态, 暂停 */
animation-play-state: paused;

/* 动画复合属性 */
animation: testKey 3s 0.5s linear 2 alternate-reverse forwards;

相关推荐

26岁中科大教授攻克世界数学难题(中科大26岁数学家)

硬核研究世界顶尖数学期刊发表其研究论文“陈杲特任教授年仅26岁。他2008年入读中科大少年班,2012年赴纽约州立大学石溪分校,师从陈秀雄教授攻读博士。2017年博士毕业后历任普林斯顿高等研究院博士...

CSP-J/S倒计时 如何做好充足准备?

CSP-J/S计算机软件能力认证作为信奥系列赛的首场测试,重要性也就不言而喻了。初试的题目往往是被忽略的环节,但初试是进入复试必须经过之路,成绩低的话无法晋级复试,就更别提复试奖项或者晋级NOIP...

信息学竞赛CSP- J/S满分小学生是怎么养成的

2024年四川省CSP-J的复赛中,一共有11名选手拿到400分满分,其中有一名小学生,让所有人惊讶又惊喜——嘉祥成华小学六年级学生邱明夷。大家都亲切的叫他小邱邱,因为他刚来新易元学信奥的时候是小学四...

CSP-J/S什么情况容易得零分(csp-j/s是什么意思)

信息學奥赛CSP复赛啊,有这几个点不注意就很容易得0分,第一点呢就是复赛采用的是oi赛制,就是说如果结束后提交代码就无法在比赛的过程中,测试你的代码是否正确,只要有一点点错误就可能会导致0分,一定要严...

素数分布的解析理论:π(x)、Li(x)和J(x)的严格数学框架

本文从解析数论视角严格阐述素数计数函数π(x)、对数积分Li(x)及黎曼素数函数J(x)之间的数学关系。通过引入黎曼ζ函数的零点分布理论,构建了素数定理的精确表达式,并给出误差项的解析结构。一、基本定...

陈杲一本书三年读了三遍(陈红看一本书,三天看完)

【陈杲一本书三年读了三遍】14岁读大学、23岁获博士学位、26岁解出J方程和超临界厄米特—杨振宁—米尔斯方程的变形这一世界难题,用数学在相对论与量子力学间架起“新桥”。“天才”陈杲说自己“天赋是有一点...

数学不好能学信奥吗?要提前学数学吗?一文读懂数学与信奥的关系

在信奥的征途上,数学不仅是基石,更是推动孩子们不断前行的动力。然而,对于小学和初中阶段的孩子来说,如何提前布局数学学习,如何平衡数学与信奥的关系,成为了家长们普遍关心的问题。本文将从实际出发,探讨信奥...

手术机器人如何既准确又正确(手术机器人如何既准确又正确使用)

日前,北京积水潭医院矫形骨科周一新教授团队提出“臼杯矢状面角度的数学转换公式”,填补了该领域的国际空白,据此揭示了统治髋关节重建领域近50年的传统安全区(Lewinek安全区)不能成立之数学原理,并进...

天塌了,原来无痕内衣都是用胶粘出来的?

无痕内衣和轻薄贴身的夏装十分相配,它平整柔软的边缘也减少了摩擦皮肤的不适感。然而,这种内衣也有一些令人担忧的传闻。有人说无痕内衣都是用“胶水”粘出来的,有人说它稍有不慎就会开胶,甚至走在路上还会突然解...

COD 消解器回流仪操作指南:3 步完成精准水质检测

化学需氧量(COD)检测是水质监测的核心指标,COD消解器回流仪作为实验室标配设备,其操作规范直接决定数据准确性。本文基于2025年最新版《水质检测设备操作规范》(HJ/T399-2025),...

产品图多导致页面变慢?WordPress外贸站“懒加载+CDN”一做

“哥,我这首页产品图很多,有灯具细节、展示效果、客户实拍,一开页面就卡得一批…”一个做户外照明出口的客户说。我看了下他站,确实首页就塞了20多张大图,图又是PNG原图,有的1MB一张我用C...

JWT:一文搞懂现代身份验证的 "数字护照"

什么是JWT?先看一个生活比喻假设你去图书馆借书,管理员给你一张带盖章的借阅证,上面写着你的姓名、借阅权限和有效期。每次借书时,你只需出示这张证,管理员核对盖章无误就会放行——这就是JWT(...

JS setTimeout 的另类用法(js中settime)

众所周知,JS中不消耗时间的函数一般是同步的,消耗时间的函数(比如:文件操作,网络操作)一般是异步的。JS默认是单线程的,异步是通过EventLoop来完成任务列表里的任务。当你的主线程中同步过程太...

JVM GC诡异问题排查,k8s差点害死我……

前言本文将通过一个真实的生产环境案例,详细展示如何系统性地排查和解决JVM垃圾收集问题。这个案例涵盖了从问题发现、分析诊断到最终解决的完整过程,对于理解JVM调优实战具有重要的参考价值。系统背景我们的...

任天堂Switch 2首发评测:DLSS 3.5画质提升与Joy-Con摇杆耐久测试

任天堂Switch2终于来了!作为老玩家,我第一时间拿到机器,重点测试了两个大家最关心的点:DLSS3.5技术对画面的增强效果,以及Joy-Con摇杆的耐用性改进。下面用大白话聊聊实测体验,帮你避...