CSS学习笔记（十八）CSS 2D 转换，3D 转换，过渡，动画

最新推荐文章于 2021-08-26 17:39:14 发布
最新推荐文章于 2021-08-26 17:39:14 发布
阅读量288 收藏 1
点赞数 1
分类专栏： 前端学习 文章标签： css html animation
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43625134/article/details/117199595
版权

CSS 2D 转换

CSS 2D 转换方法

通过使用 CSS transform 属性，您可以利用以下 2D 转换方法：

translate()
rotate()
scaleX()
scaleY()
scale()
skewX()
skewY()
skew()
matrix()

translate() 方法

translate() 方法从其当前位置移动元素（根据为 X 轴和 Y 轴指定的参数）。

下面的例子把 <div> 元素从其当前位置向右移动 50 个像素，并向下移动 100 个像素：
实例

div {
  transform: translate(50px, 100px);
}

rotate() 方法

rotate() 方法根据给定的角度顺时针或逆时针旋转元素。

下面的例子把 <div> 元素顺时针旋转 20 度：

实例

div {
  transform: rotate(20deg);
}

使用负值将逆时针旋转元素。
下面的例子把 <div> 元素逆时针旋转 20 度：

实例

div {
  transform: rotate(-20deg);
}

scale() 方法

scale() 方法增加或减少元素的大小（根据给定的宽度和高度参数）。

下面的例子把 <div> 元素增大为其原始宽度的两倍和其原始高度的三倍：

实例

div {
  transform: scale(2, 3);
}

下面的例子把 <div> 元素减小为其原始宽度和高度的一半：

实例

div {
  transform: scale(0.5, 0.5);
}

scaleX() 方法

scaleX() 方法增加或减少元素的宽度。

下面的例子把 <div> 元素增大为其原始宽度的两倍：

实例

div {
  transform: scaleX(2);
}

减小一半时换成0.5.

scaleY() 方法

scaleY() 方法增加或减少元素的高度。

下面的例子把 <div> 元素增大到其原始高度的三倍：

实例

div {
  transform: scaleY(3);
}

同理，减小为一半时，改为0.5.

skewX() 方法

skewX() 方法使元素沿 X 轴倾斜给定角度。

下例把 <div> 元素沿X轴倾斜 20 度：
（X轴上不变，Y轴倾斜）
实例

div {
  transform: skewX(20deg);
}

skewY() 方法

skewY() 方法使元素沿 Y 轴倾斜给定角度。

下例把 <div> 元素沿 Y 轴倾斜 20 度：
（Y轴上不变，X轴倾斜）
实例

div {
  transform: skewY(20deg);
}

skew() 方法

skew() 方法使元素沿 X 和 Y 轴倾斜给定角度。

下面的例子使 <div> 元素沿 X 轴倾斜 20 度，同时沿 Y 轴倾斜 10 度：

实例

div {
  transform: skew(20deg, 10deg);
}

如果未指定第二个参数，则值为零。因此，下例使 <div> 元素沿 X 轴倾斜 20 度

matrix() 方法

matrix() 方法把所有 2D 变换方法组合为一个。

matrix() 方法可接受六个参数，其中包括数学函数，这些参数使您可以旋转、缩放、移动（平移）和倾斜元素。

参数如下：matrix(scaleX(),skewY(),skewX(),scaleY(),translateX(),translateY())

实例

div {
  transform: matrix(1, -0.3, 0, 1, 0, 0);
}

CSS 2D 转换方法

在这里插入图片描述

CSS 3D 转换

CSS 3D 转换方法

通过 CSS transform 属性，您可以使用以下 3D 转换方法：

rotateX()
rotateY()
rotateZ()

rotateX() 方法

rotateX() 方法使元素绕其 X 轴旋转给定角度：

实例

#myDiv {
  transform: rotateX(150deg);
}

rotateY() 方法

rotateY() 方法使元素绕其 Y 轴旋转给定角度：

实例

#myDiv {
  transform: rotateY(130deg);
}

rotateZ() 方法

rotateZ() 方法使元素绕其 Z 轴旋转给定角度：

实例

#myDiv {
  transform: rotateZ(90deg);
}

CSS 3D 转换方法

在这里插入图片描述

CSS 过渡

如何使用 CSS 过渡？

如需创建过渡效果，必须明确两件事：

  • 您要添加效果的 CSS 属性
  • 效果的持续时间

注意：如果未规定持续时间部分，则过渡不会有效果，因为默认值为 0。

下面的例子展示了 100px * 100px 的红色 <div> 元素。 <div> 元素还为 width 属性指定了过渡效果，持续时间为 2 秒

<!DOCTYPE html>
<html>
<head>
<style> 
div {
  width: 100px;
  height: 100px;
  background: red;
  transition: width 2s;
}

div:hover {
  width: 300px;
}
</style>
</head>
<body>

<h1>transition 属性</h1>

<p>请把鼠标悬停在下面的 div 元素上，来查看过渡效果：</p>

<div></div>

</body>
</html>

改变若干属性值

下面的例子为 width 和 height 属性都添加了过渡效果，width 是 2 秒，height 是 4 秒：

实例

div {
  transition: width 2s, height 4s;
}

指定过渡的速度曲线

transition-timing-function 属性规定过渡效果的速度曲线。

transition-timing-function 属性可接受以下值：

ease - 规定过渡效果，先缓慢地开始，然后加速，然后缓慢地结束（默认）
linear - 规定从开始到结束具有相同速度的过渡效果
ease-in -规定缓慢开始的过渡效果
ease-out - 规定缓慢结束的过渡效果
ease-in-out - 规定开始和结束较慢的过渡效果
cubic-bezier(n,n,n,n) - 允许您在三次贝塞尔函数中定义自己的值

下面的例子展示了可以使用的一些不同的速度曲线：
实例

#div1 {transition-timing-function: linear;}
#div2 {transition-timing-function: ease;}
#div3 {transition-timing-function: ease-in;}
#div4 {transition-timing-function: ease-out;}
#div5 {transition-timing-function: ease-in-out;}

延迟过渡效果

transition-delay 属性规定过渡效果的延迟（以秒计）。

下例在启动之前有 1 秒的延迟：

实例

<!DOCTYPE html>
<html>
<head>
<style> 
div {
  width: 100px;
  height: 100px;
  background: red;
  transition: width 3s;
  transition-delay: 1s;
}

div:hover {
  width: 300px;
}
</style>
</head>
<body>

<h1>transition-delay 属性</h1>

<p>请把鼠标悬停在下面的 div 元素上，来查看过渡效果：</p>

<div></div>

<p><b>注释：</b>过渡效果在开始之前有 1 秒的延迟。</p>

</body>
</html>

过渡 + 转换

下例为转换添加过渡效果：

实例

<!DOCTYPE html>
<html>
<head>
<style> 
div {
  width: 100px;
  height: 100px;
  background: red;
  transition: width 2s, height 2s, transform 2s;
}

div:hover {
  width: 300px;
  height: 300px;
  transform: rotate(180deg);
}
</style>
</head>
<body>

<h1>Transition + Transform</h1>

<p>请把鼠标悬停在下面的 div 元素上：</p>

<div></div>

</body>
</html>

CSS 过渡属性

在这里插入图片描述

CSS 动画

什么是 CSS 动画？

动画使元素逐渐从一种样式变为另一种样式。

您可以随意更改任意数量的 CSS 属性。

如需使用 CSS 动画，您必须首先为动画指定一些关键帧。

关键帧包含元素在特定时间所拥有的样式。

@keyframes 规则

如果您在 @keyframes 规则中指定了 CSS 样式，动画将在特定时间逐渐从当前样式更改为新样式。

要使动画生效，必须将动画绑定到某个元素。

下面的例子将 “example” 动画绑定到

元素。动画将持续 4 秒钟，同时将
元素的背景颜色从 “red” 逐渐改为 “yellow”： 

<!DOCTYPE html>
<html>
<head>
<style> 
div {
  width: 100px;
  height: 100px;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
}

@keyframes example {
  from {background-color: red;}
  to {background-color: yellow;}
}
</style>
</head>
<body>

<div></div>

<p><b>注释：</b>当动画结束后，会变回最初的样式。</p>

</body>
</html>

注意：animation-duration 属性定义需要多长时间才能完成动画。如果未指定 animation-duration 属性，则动画不会发生，因为默认值是 0s（0秒）。

在上面的例子中，通过使用关键字 “from” 和 “to”（代表 0％（开始）和 100％（完成）），我们设置了样式何时改变。

您也可以使用百分比值。通过使用百分比，您可以根据需要添加任意多个样式更改。

下面的例子将在动画完成 25％，完成 50％ 以及动画完成 100％ 时更改 <div> 元素的背景颜色：
实例

/* 动画代码 */
@keyframes example {
  0%   {background-color: red;}
  25%  {background-color: yellow;}
  50%  {background-color: blue;}
  100% {background-color: green;}
}

/* 应用动画的元素 */
div {
  width: 100px;
  height: 100px;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
}

下面的例子将在动画完成 25％，完成 50％ 以及动画完成 100％ 时更改背景颜色和 <div> 元素的位置：

实例

/* 动画代码 */
@keyframes example {
  0%   {background-color:red; left:0px; top:0px;}
  25%  {background-color:yellow; left:200px; top:0px;}
  50%  {background-color:blue; left:200px; top:200px;}
  75%  {background-color:green; left:0px; top:200px;}
  100% {background-color:red; left:0px; top:0px;}
}

/* 应用动画的元素 */
div {
  width: 100px;
  height: 100px;
  position: relative;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
}

延迟动画

animation-delay 属性规定动画开始的延迟时间。

下面的例子在开始动画前有 2 秒的延迟：

实例

div {
  width: 100px;
  height: 100px;
  position: relative;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
  animation-delay: 2s;
}

负值也是允许的。如果使用负值，则动画将开始播放，如同已播放 N 秒。

设置动画应运行多少次

animation-iteration-count 属性指定动画应运行的次数。

下面的例子在停止前把动画运行 3 次：

实例

div {
  width: 100px;
  height: 100px;
  position: relative;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
  animation-iteration-count: 3;
}

下面的例子使用值 “infinite” 使动画永远持续下去：

实例

div {
  width: 100px;
  height: 100px;
  position: relative;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
  animation-iteration-count: infinite;
}

反向或交替运行动画

animation-direction 属性指定是向前播放、向后播放还是交替播放动画。

animation-direction 属性可接受以下值：

normal - 动画正常播放（向前）。默认值
reverse - 动画以反方向播放（向后）
alternate - 动画先向前播放，然后向后
alternate-reverse - 动画先向后播放，然后向前

下例将以相反的方向（向后）运行动画：

实例

div {
  width: 100px;
  height: 100px;
  position: relative;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
  animation-direction: reverse;
}

同理可换为其他的几种方式。

指定动画的速度曲线

animation-timing-function 属性规定动画的速度曲线。

animation-timing-function 属性可接受以下值：

ease - 指定从慢速开始，然后加快，然后缓慢结束的动画（默认）
linear - 规定从开始到结束的速度相同的动画
ease-in - 规定慢速开始的动画
ease-out - 规定慢速结束的动画
ease-in-out - 指定开始和结束较慢的动画
cubic-bezier(n,n,n,n) - 运行您在三次贝塞尔函数中定义自己的值

下面这些例子展示了可以使用的一些不同速度曲线：

实例

#div1 {animation-timing-function: linear;}
#div2 {animation-timing-function: ease;}
#div3 {animation-timing-function: ease-in;}
#div4 {animation-timing-function: ease-out;}
#div5 {animation-timing-function: ease-in-out;}

指定动画的填充模式

CSS 动画不会在第一个关键帧播放之前或在最后一个关键帧播放之后影响元素。animation-fill-mode 属性能够覆盖这种行为。

在不播放动画时（在开始之前，结束之后，或两者都结束时），animation-fill-mode 属性规定目标元素的样式。

animation-fill-mode 属性可接受以下值：

none - 默认值。动画在执行之前或之后不会对元素应用任何样式。
forwards - 元素将保留由最后一个关键帧设置的样式值（依赖 animation-direction 和 animation-iteration-count）。
backwards - 元素将获取由第一个关键帧设置的样式值（取决于 animation-direction），并在动画延迟期间保留该值。
both - 动画会同时遵循向前和向后的规则，从而在两个方向上扩展动画属性。

下面的例子让 <div> 元素在动画结束时保留来自最后一个关键帧的样式值：
实例

div {
  width: 100px;
  height: 100px;
  background: red;
  position: relative;
  animation-name: example;
  animation-duration: 3s;
  animation-fill-mode: forwards;
}

下面的例子在动画开始之前（在动画延迟期间）使 <div> 元素获得由第一个关键帧设置的样式值：

实例

div {
  width: 100px;
  height: 100px;
  background: red;
  position: relative;
  animation-name: example;
  animation-duration: 3s;
  animation-delay: 2s;
  animation-fill-mode: backwards;
}

下面的例子在动画开始之前使 <div> 元素获得第一个关键帧设置的样式值，以及在动画结束时保留最后一个关键帧的样式值：

实例

div {
  width: 100px;
  height: 100px;
  background: red;
  position: relative;
  animation-name: example;
  animation-duration: 3s;
  animation-delay: 2s;
  animation-fill-mode: both;
}

主要的意思是：在还没开始之前获得第一帧的动画，在结束后保留最后一帧的动画。

动画简写属性

下例使用六种动画属性：
实例

div {
  animation-name: example;
  animation-duration: 5s;
  animation-timing-function: linear;
  animation-delay: 2s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

使用简写的 animation 属性也可以实现与上例相同的动画效果：

实例

div {
  animation: example 5s linear 2s infinite alternate;
}

CSS 动画属性

在这里插入图片描述

〔晴【天】º〕
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
CSS3 3D彩色文本转圈动画特效.zip
10-05
CSS3是层叠样式表的第三版，它引入了许多新的选择器、伪类、属性以及模块，如3D转换、动画和过渡。这些功能使得开发者能够创建出更加复杂且富有表现力的网页设计，而无需依赖额外的图像或插件。 在3D彩色文本转圈...
css入门学习笔记补充 补充了一些选择器
05-25
在初学者的CSS学习过程中，了解并掌握各种选择器至关重要。本篇笔记将补充一些CSS选择器的知识，帮助你更好地理解和应用它们。 1. **属性选择器**： 属性选择器允许我们根据元素的特定属性来选择元素。例如，`E...
css3 2d转换3d转换以及动画的知识点汇总
weixin_30807779的博客
01-28 187
css3 2d转换 2d转换的方法： 1、移动 translate(x, y) 可以改变元素的位置，x、y可为负值； 2、缩放 scale(x, y) 可以对元素进行水平和垂直方向的缩放，x、y的取值可为小数，不可为负值； 4、旋转 rotate(deg) 可以对元素进行旋转，正值为顺时针，负值为逆时针； 5、倾斜 skew(deg, deg) 可以使元素按一定的角度进行倾斜 2d转换...
CSS3——过渡、动画、2D/3D转换
Guizy
12-19 1253
目录 过渡模块 动画模块 2D转换 3D转换 过渡模块 一、一些属性 transition: 过渡属性 过渡时长 运动速度 延迟时间; transition-property: 属性名 - 告诉系统哪个属性需要执行过渡效果. transition-duration: 时长 - 告诉系统过渡效果的持续的时长. transition-delay: 时长 - 告诉系统延迟多少秒之...
css3属性之2D转换、3D转换、过度、动画
qq_38401285的博客
03-13 290
1、2D转换（可以对元素进行旋转、平移、缩放、转动。）Internet Explorer 10, Firefox, 和 Opera支持transform 属性.Chrome 和 Safari 要求前缀 -webkit- 版本.注意： Internet Explorer 9 要求前缀 -ms- 版本.transform：translate（x,y）;//x代表沿x轴平移的距离，y代表沿y轴平移的距离...
CSS3中2D、3D转换及过渡总结
JokeOrSerious的博客
05-07 335
2D、3D转换均使用CSS中transform属性，转换在瞬间完成 2D转换属性值： translate(x,y) 将该元素由原本位置向右移动x,向下移动y。translate一个英文意思即为平移。 rotate(30deg) 将该元素顺时针旋转30度，默认为3D旋转的Z轴。 scale(x,y) 将元素宽度转换为x倍，高度转换为y倍 skew(30...
css2D过渡转换
weixin_53125449的博客
12-17 200
文章目录浏览器前缀过渡2D转换2D转换缩放转换位移旋转倾斜 浏览器前缀 谷歌 苹果： -webkit- 火狐 ： -moz- IE ： -ms- 欧朋： -o- 过渡2D转换 transition 过渡： 以前，元素从一个状态到另外一个状态（hover）直接切换，从开始状态到结束状态瞬间完成，中间过程几乎不可见，但是css3新增了过渡这个属性，可以实现元素不同状态之间的平滑过渡。 transition-property:指定过渡的属性。 all为指定所有属性都有过渡效果。（ 必须填写的属
2D文字与3D图像粒子转换动画特效.rar
10-01
本资源"2D文字与3D图像粒子转换动画特效.rar"提供了一种独特的技术，结合了2D文字与3D图像粒子的转换，为网页增添动态美感。这个特效不仅能够吸引用户注意力，还能在一定程度上提升网站或应用的交互性。 首先，我们...
CSS3创意堆叠式3D动画特效.rar
10-01
【标题】"CSS3创意堆叠式3D动画特效.rar" 涉及的主要知识点是CSS3中的3D转换和动画效果，以及如何利用这些特性创建具有视觉吸引力的网页元素堆叠展示。CSS3是层叠样式表的第三个主要版本，它引入了许多新的功能和...
CSS3 3D彩色魔方动画特效.zip
最新发布
10-09
【标题】"CSS3 3D彩色魔方动画特效.zip" 涉及的主要知识点是CSS3中的3D转换和动画效果。CSS3是层叠样式表（Cascading Style Sheets）的第三版，它引入了许多增强功能，使得网页设计更加丰富多彩。其中，3D转换是CSS3...
css简单实现环形动画效果，无需js
11-11
简单css实现环形动画效果，无需js；本资源适用于移动端、pc端，兼容性各大浏览器
css-2D转换以及过渡
胖达cd的博客
08-12 291
2D概念 转换是CSS3中具有颠覆性的特征之一，可以实现元素的位移、旋转、变形、缩放，甚至支持矩阵方式，配合即将学习的过渡和动画知识，可以取代大量之前只能靠Flash才可以实现的效果。 2D 动画要是使用 transform 属性来实现文字或图像的的各种变形效果，如位移、缩放、旋转、倾斜等。 transform属性变形方法： 1.translate()：位移 　　　　　将元素沿着水平方向（X轴）和...
CSS 2D、3D转换、过渡和动画效果
qxjswl的博客
05-21 512
2D转换 2D转换的内容：对元素进行旋转、缩放、移动、拉伸。运用的CSS属性是 transform属性 transform属性： 取值： 1.rorate( deg)函数：对元素进行旋转，旋转中心为元素的几何中心，括号里的参数是角度（正值：顺时针旋转相应角度；负值：逆时针旋转相应角度）。 例： 2.scale(x,y)函数：对元素进行缩放；x: 水平方向缩放的倍数；y：垂直方向的缩放倍数，若省略，与x相同；x,y取值0~1时时缩小，>1时时放大。 3D转换 设置在父元素中，使子元素保留3d
CSS2D旋转、过渡、动画
weixin_30808575的博客
07-13 196
2D转换： 位移： -webkit-transform:translate( ); 缩放： -webkit-transform：scale(.像素,.像素); 旋转： -webkit-transform：rotate(45deg); -webkit-transform-origin:x px,y px; 斜切： -webkit-transform：s...
CSS定位，2D转换和过渡
qq_51352578的博客
08-26 248
CSS定位 position 1. static 静态定位 选择器{ position:static; } 静态定位是默认的定位方式 静态定位按照标准流特性摆放位置，它没有边偏移 静态定位在布局时很少用到 2. relative 相对定位 相对定位是元素在移动位置的时候，是相对于它原来的位置来说的。 选择器{ position:static; } 特点： 元素原来在标准流中的位置继续占有，后面的盒子仍然以标准流的方式来对待它。相对定位并没有脱标，它最典型的的应用是给绝对定位当参考的。
css3动画——2d动画，过渡动画
不想写代码的一天
05-07 990
css3的动画 分类： 2d 动画 ，3d 动画， 2d转3d，过渡动画和帧动画 《一》2d转换:transfrom 转换可以可以对元素进行移动、缩放、转动、拉长或拉伸。 属性 描述 translate() 平移（沿x,y,z轴方向平移 px） rotate() 旋转（沿x,y,z轴方向平移 deg） scale() 放大 skew (变形 deg) trans...
CSS3 ---2D/3D、过渡、动画
DreamFive
11-06 613
212
Vue 使用 Css3 中的 skewY 属性实现饼图倒计时效果
BradyCC的博客
05-29 641
项目需求：要做饼图倒计时效果。 一开始只想到了用 border-radius 来实现，但只能拆分成 4 个半圆。动态显示没有倒计时的类似效果。 通过查看资料发现 Css3 中的 skewY 属性可以实现类似的需求，旋转角度可以从 0° 到 90°，这样再配合 border-radius 就可以实现想要的效果了。 具体方法如下： ...
skew() 方法
hugejihu9的专栏
01-17 1466
文章来自：源码在线https://www.shengli.me/css/599.html     实例：     效果：        
CSS转换：2D与3D空间的元素变形艺术
1. **2D与3D变换的组合**：通过结合不同的2D和3D变换，你可以创建出富有动态和创新的用户界面。例如，旋转一张图片、实现有趣的透视效果，或者设计一个界面，让用户能够查看元素的背面信息。 2. **坐标系统理解**：...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值