css3动画&2D|3D

最新推荐文章于 2024-06-12 23:42:05 发布
最新推荐文章于 2024-06-12 23:42:05 发布
阅读量284 收藏
点赞数
分类专栏： 啊实打实的 文章标签： html Powered by 金山文档
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/passion0/article/details/129205431
版权
本文详细介绍了CSS3中的2D和3D变换，包括transform属性的各种方法如平移、旋转、缩放、倾斜，以及如何创建3D空间。同时，文章还讲解了帧动画的定义、关键帧的设定和引用，以及animate.css动画库的使用。此外，还对比了过渡和动画的区别。
摘要由CSDN通过智能技术生成

css3动画&2D|3D

一、css3的transform属性

  • 2d坐标轴（图示）

  • x轴：水平，向右为正，向左为负

  • y轴：垂直，向下为正，向上为负

2d转换的方法

1、2D变形：平移、旋转、缩放、倾斜

1) transform: translate()平移

  • transform: translate(x,y) 沿着x轴和y轴移动

  • transform: translateX(x) 沿着x轴移动

  • transform: translateY(y) 沿着y轴移动

取值:

  • px

  • 百分比（强调相对于元素本身计算）

  • 水平，向右为正，向左为负

  • 垂直，向下为正，向上为负

  • x与y之间用逗号隔开

水平向右为正值，垂直方向向下正值

/* 沿着水平方向位移 */

当为一个值的时候，只沿着水平方向位移

transform: translate(50px);

注意:元素位移之后，原来的位置还在

2) transform: rotate(ndeg) 旋转

  • 语法

  • transform：rotate(deg);沿着中心点旋转，默认值

  • transform: rotateX(deg);沿着X轴旋转

  • transform: rotateY(deg);沿着Y轴旋转

单位：deg 当角度值为正数时，元素沿着顺时针方向旋转 当角度值为负数时，元素沿着逆时针方向旋转

创建网页3d空间

.wrap {

perspective: 800px;

}

​

.wrap div {

width: 100px;

height: 100px;

background-color: pink;

margin: 30px;

text-align: center;

line-height: 100px;

font-size: 30px;

​

/* 过渡动画 */

transition: 2s;

​

​

}

​

.box1:hover {

background-color: blue;

transform: rotate(45deg);

}

​

.box2:hover {

background-color: tomato;

transform: rotate(-45deg);

}

​

.box3:hover {

transform: rotateX(60deg);

}

​

.box4:hover {

transform: rotateY(60deg);

}

​

.box5:hover {

transform: rotateY(-60deg);

}

​

​

.box6:hover {

transform: rotateX(120deg);

}

​

.box7:hover {

transform: rotateX(-120deg);

}

​

​

<divclass="wrap">

<divclass="box1">1</div>

<divclass="box2">2</div>

<divclass="box3">3</div>

<divclass="box4">4</div>

<divclass="box5">5</div>

<divclass="box6">6</div>

<divclass="box7">7</div>

</div>

3）transform: scale() 缩放

  • transform: scale(x,y) 沿着x轴和y轴缩放

  • transform: scaleX(x) 沿着x轴缩放

  • transform: scaleY(y) 沿着y轴缩放

取值范围0~1之间表示缩小，1表示正常大小，1以上表示放大，默认值为1取值为负值表示先翻转后缩放
为一个值的时候，沿着水平方向和垂直方向等比例缩放
元素缩放为0 后，原来的位置还在
x与y之间用逗号隔开

transform: scale(1.5);/* 沿着水平方向和垂直方向都放大1.5倍，等比例缩放 */

transform: scale(-1.5);/* 先翻转，然后 沿着水平方向和垂直方向都放大1.5倍 */

4）transform: skew() 倾斜

  • transform: skew(x,y) 沿着x轴和y轴倾斜

  • transform: skewX(x) 沿着x轴倾斜

  • transform: skewY(y) 沿着y轴倾斜

单位deg(角度)正值，向左上角和右下角倾斜；负值，向右上角和左下角倾斜
为一个值的时候，只沿着水平方向倾斜

/* 为一个值的时候，只沿着水平方向位移 */

.box1:hover {

transform: skew(45deg);

}

/* skew(30deg,45deg) 围绕 X 轴把元素翻转 30 度，围绕 Y 轴翻转 45 度 */

.box2:hover {

background-color: tomato;

transform: skew(30deg, 45deg);

}

​

.box3:hover {

transform: skewX(-45deg);

}

​

.box4:hover {

transform: skewY(45deg);

​

}

.box5:hover {

transform: skewY(-45deg);

}

5）transform-origin属性 设置元素的基点位置

  • transform-origin: 水平方向 垂直方向;

  • 设置元素的基点位置，设置围绕哪个点进行变化

  • 取值

百分比（参照自身计算）

px

关键字

水平：left center right 垂直：top center bottom

  • 说明：两个空格隔开的值，分别表示x,y轴的原点一个值时，另一个值默认center

  • 可为负数

必须与transform属性配合使用
位移不能用

<!DOCTYPE html>

<htmllang="en">

​

<head>

<metacharset="UTF-8">

<metahttp-equiv="X-UA-Compatible"content="IE=edge">

<metaname="viewport"content="width=device-width, initial-scale=1.0">

<title>Document</title>

<style>

.wrap {

width: 400px;

height: 400px;

background-color: aquamarine;

margin: 50pxauto;

/* overflow: hidden; */

}

​

.wrap.box {

width: 200px;

height: 200px;

background-color: pink;

/* margin: 50px auto; */

transition: 2s;

​

​

transform-origin: 200px100px;

transform-origin: -200px100px;

​

transform-origin: 100%80%;

transform-origin: -100%80%;

​

transform-origin: 70%150%;

​

transform-origin: lefttop;

​

​

​

}

​

.wrap:hover.box {

transform: rotate(180deg);

​

​

}

</style>

</head>

​

<body>

​

<divclass="wrap">

<divclass="box">box</div>

</div>

​

</body>

​

</html>

5）旋转，位移，缩放，倾斜的复合写法

属性之间用空格隔开

​

.wrap:hover.box1 {

transform: rotate(135deg);

transform: translate(50px);

transform: scale(1.5);

transform: translate(100px) rotate(120deg) scale(1.5);

}

  • 总结：

名称

语法

取值

单位

其他

位移

transform:translate();

一个值（沿着水平方向位移），两个值

像素px

transform: translateX(); transform: translateY()

旋转

transform: rotate();

一个值

deg角度

缩放

transform: scale();

一个值（等比例缩放）、两个值

没有单位

transform: scaleX(); transform: scaleY()

倾斜

transform: skew();

一个值（沿着水平方向倾斜）、两个值

deg角度

transform: skewX(); transform: skewY();

2、3D变形：平移、旋转、缩放

什么是3d转换

定义元素在三维空间移动、缩放、旋转

3d坐标轴（图示）

###

3D立体空间的3根轴线

  • x轴：水平，向右为正，向左为负

  • y轴：垂直，向下为正，向上为负

  • z轴：垂直于屏幕，向外为正，向内为负

1）3D必备属性

  • transform-style: preserve-3d; 创建3d空间

  • 什么时候搭建3d舞台？

  • 父元素有3D变形，子元素也有3D变形

  • perspective属性：景深（透视），属性值为透视点到元素的距离，近大远小；也可以让网页产生3D效果，单位像素

  • 一般取值：800px-1000px
    perspective：800px 就是人离屏幕800px 的地方观看这个div元素。
    当translateZ的大小临近与800px时图片离我们越来越近了
    当它大于800px时，这个图片就消失了

    反之当translateZ为负值时，我们可以看到图片变小了，也就是图片离人越来越远了。


    透视点到元素的距离
    1000px: 我到乔乔的距离 1000px

    300px:我往前走到了300px位置看乔乔

    600px:我往前走到了600px位置看乔乔


    -300px:我往后走到了-300px位置看乔乔，-1300
    -600px:我往后走到了-600px位置看乔乔，-1600


    1000px:走到了乔乔面前看
    >1000px:走过了乔乔，看不见了

  • preserve-3d， 如果搭配overflow: hidden/scroll/auto使用，相当于2D效果

transform-style属性和perspective属性放在父元素中,有时候perspective属性放在body中
2) 位移

  • transform: translateZ(z); 沿着z轴方向位移

  • transform: translate3d(x,y,z) 沿着x、y、z轴方向位移

z指的是 z 轴的向量位移长度。当其值为负值时，元素在 Z 轴越移越远，导致元素变小。反之当值为正值时，

其在 Z 轴越移越近，导致元素变得较大。

<!DOCTYPE html>

<htmllang="en">

​

<head>

<metacharset="UTF-8">

<metahttp-equiv="X-UA-Compatible"content="IE=edge">

<metaname="viewport"content="width=device-width, initial-scale=1.0">

<title>Document</title>

<style>

.father {

width: 400px;

height: 400px;

border: 2pxsolidtomato;

margin: 100pxauto;

/* 景深效果，创建网页3d效果 */

perspective: 1000px;

}

​

.father.son {

width: 200px;

height: 200px;

background-color: tomato;

margin: 100pxauto;

​

}

​

.father:hover.son {

transform: translateZ(200px);

transform: translateZ(-200px);

transform: translateX(100px) translateY(50px) translateZ(200px);

transform: translate3d(100px, 50px, 200px);

​

}

</style>

</head>

​

<body>

<divclass="father">

<divclass="son"></div>

</div>

</body>

​

</html>

3) 旋转

  • transform: rotateX(a); 沿着x轴方向旋转

  • a 指的是一个旋转角度值，如果为正值，元素围绕X轴顺时针旋转；反之，如果为负值，元素围绕X轴逆时针旋转。

  • transform: rotateY(a); 沿着y轴方向旋转

  • a 指的是一个旋转角度值，如果为正值，元素围绕Y轴顺时针旋转；反之，如果为负值，元素围绕Y轴逆时针旋转。

  • transform: rotateZ(a); 沿着Z轴方向旋转

  • a 指的是一个旋转角度值，如果为正值，元素围绕 Z 轴顺时针旋转；反之，如果为负值，元素围绕 Z 轴逆时针

旋转。

  • transform: rotate3d(x,y,z,angle);

  • 参数：

x：是一个 0 到１之间的数值，主要用来描述元素围绕 X 轴旋转的矢量值。

y：是一个 0 到１之间的数值，主要用来描述元素围绕 Y 轴旋转的矢量值。

z：是一个 0 到１之间的数值，主要用来描述元素围绕 Z 轴旋转的矢量值。

angle：一个角度值，指定在 3D 空间旋转角度，正值顺时针旋转，反之元素逆时。

1、两个值为零，定义X,Y,Z轴旋转

rotate3d(1,0,0,angle) x轴旋转

rotate3d(0,1,0,angle) y轴旋转

rotate3d(0,0,1,angle) z轴旋

​

/* 沿着x轴方向旋转 */

transform: rotateX(-45deg);

transform: rotate3d(1,0,0,-45deg);

​

/* 沿着y轴方向旋转 */

transform: rotateY(-45deg);

transform: rotate3d(0,1,0,-45deg);

​

/* 沿着z轴方向旋转 */

transform: rotateZ(-45deg);

transform: rotate3d(0,0,1,-45deg);

​

​

2、两个值不为零，定义多轴旋转

rotate3d(1,0.5,0,30deg)

​

x1*30 30deg

​

y0.5*30 15deg

​

z0*0 0deg

​

.box5:hoverimg {

/* z */

transform: rotate3d(.5, 1, 0, 60deg);

/*

x:0.5*60=30deg

y:1*60=60deg

z:0*60=0deg

​

*/

}

3、三个值不为零，定义多轴旋转

​

.box6:hoverimg {

/* z */

transform: rotate3d(.5, 1, 1, 60deg);

/*

x:0.5*60=30deg

y:1*60=60deg

z:1*60=60deg

​

*/

}

4）缩放

  • transform: scaleZ() 沿着z轴方向缩放 (厚度)

  • transform: scale3d() 沿着x、y、z轴方向缩放

  • 取值

  • 默认值为1

  • 使用0~1之间的值缩小元素使用超过1的值放大元素

  • 注意：scaleZ单独使用看不到效果，需要配合其他变换属性一起使用

transform: scaleZ(3);

transform: scale3d(2, 3, 3);

3D缩放Z轴演示

<!doctype html>

<html>

​

<head>

<metacharset="utf-8">

<title>无标题文档</title>

​

<style>

.wrap {

width: 1000px;

height: 600px;

border: 1pxsolidred;

perspective: 500px;

perspective-origin: righttop;

}

​

.box {

position: absolute;

left: 50%;

margin-left: -100px;

top: 50%;

margin-top: -100px;

width: 200px;

height: 200px;

transform-style: preserve-3d;

/* transform: scale3d(1.5, 1, 1.5); */

transform: scaleZ(1.5);

}

​

.boxdiv {

position: absolute;

left: 0;

top: 0;

width: 200px;

height: 200px;

}

​

.boxdiv:nth-child(1) {

background: red;

transform: rotateX(90deg) translateZ(100px);

}

​

.boxdiv:nth-child(2) {

background: yellow;

transform: rotateX(90deg) translateZ(-100px);

}

​

.boxdiv:nth-child(3) {

background: green;

transform: rotateY(90deg) translateZ(100px);

}

​

.boxdiv:nth-child(4) {

background: blue;

transform: rotateY(90deg) translateZ(-100px);

}

​

.boxdiv:nth-child(5) {

background: pink;

transform: translateZ(100px);

}

​

.boxdiv:nth-child(6) {

background: orange;

transform: translateZ(-100px);

}

</style>

​

</head>

​

<body>

<divclass="wrap">

<divclass="box">

<divclass="bg1"></div>

<divclass="bg2"></div>

<divclass="bg3"></div>

<divclass="bg4"></div>

<divclass="bg5"></div>

<divclass="bg6"></div>

</div>

</div>

</body>

​

</html>

二、帧动画

1、定义关键帧

@keyframes 动画名称（英文） {

0% {

/* 动画的开始 */

}

​

25% {

/* 在25%的时候进行的一个动画 */

}

​

50% {

/* 在50%的时候进行的一个动画 */

}

​

100% {

/* 动画结束 */

}

​

}

​

from,to表示开始、结束状态，也可以使用0%,100%定义

​

@keyframes 动画名称（英文） {

from {

/* 动画开始 */

}

​

to {

/* 动画结束 */

}

}

2、引用帧动画

animation: name duration timing-function delay iteration-count direction fill-mode;

animation: 动画名称 动画执行时间 动画速度曲线 延迟时间 动画播放次数 动画运动方向 动画结束之后显示的状态

​

注意：动画名称和动画执行时间必须写，否则动画无效

​

1.animation-name 动画名称 是定义关键帧是所定义的动画名称

​

2.animation-duration 动画的执行时间 单位：s/ms

​

3.animation-timing-function 规定动画运动的速度曲线

1.linear 相同的速度从开始到结束，也就是匀速

2.ease 默认值 慢速度开始--速度变快--慢速度结束

3.ease-in 慢速度开始的过渡效果，也就是以低速度开始

4.ease-out 慢速度结束的过渡效果，也就是以低速结束

5.ease-in-out 以慢速度开始和结束的过渡效果

​

4.animation-delay 定义动画何时开始

单位：s/ms

取值

- 以秒或毫秒计

- 默认值是 0

- 允许负值，（-2s 使动画马上开始，但跳过 2 秒进入动画)

​

5.animation-iteration-count 动画的执行次数

1.n 默认执行动画次数1次

2.infinite 无限次播放动画

​

6.animation-direction 定义是否应该轮流反向播放动画

1.normal 默认值，正常播放

2.alternate 动画轮流反向播放

3.alternate-reverse 从第一次就反向运动

​

7.animation-fill-mode d动画结束之后的显示状态

1.both:动画开始或结束的状态

2.fowards 动画结束时状态

3.backwards 动画开始的状态

8.animation-play-state: paused;动画播放方式 暂停

取值：

running:运动

paused: 暂停

​

​

三、animate.css动画插件

https://animate.style/

https://www.dowebok.com/demo/2014/98/

css3动画库，预设了抖动（shake）、闪烁（flash）、弹跳（bounce）、旋转（rotateIn|rotateOut）、翻转（flip）、淡入淡出（fadeIn|fadeOut）等动画效果。

使用方法：

  • 1、第一步. 引入animate.css文件

<link rel="stylesheet" href="css/animate.min.css">

  • 第二步. 给指定的元素加上指定的动画样式名

animation-name定义动画的效果名称

animation-duration定义动画持续的时间

animation-delay 定义动画延迟的时间

animation-iteration-count: 定义动画重复的次数

animation-timing-function 定义动画的速度

​

animation:动画效果 执行时间 延迟时间 执行次数 速度曲线；

animation: bounce 1s 2s infinite linear;

​

选择自己想要的动画效果，然后复制粘贴

第一个animated是必须添加的样式名，第二个是指定的动画样式名。

<divclass="animated fadeInUp"></div>

​

2、加统一的类名animated，然后选择自己想要的动画效果，然后复制粘贴

//1.直接加自己选择的类名

​

<h3class="animated tada">tada</h3>

<pclass="animated rubberBand">rubberBand</p>

<divclass="animated shake">shake</div>

​

改变其原有属性（覆盖）

.shake {

animation-delay: .5s;

animation-iteration-count: infinite;

animation-timing-function: linear;

}

​

<pid="box1">内容内容1</p>

四、css3中过渡和动画的区别？

  • 区别：语法、触发、执行次数、复杂度

  • 相同点 ： 都是随着时间改变元素的属性值。

  • 不同点：

1、过渡动画是需要触发条件的(hover事件或click事件等)，只能完成简单的动画

2、帧动画不需要任何的触发条件，可以完成复杂轨迹的动画

passion0444
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
css 2D动画
m0_70877859的博客
08-17 584
设置left（定位，内边距，外边距等等）属性会频繁的造成浏览器回流重拍，而transform和opacity（半透明属性）属性不会，因为它是作为合成图层发送到GPU上，由显卡执行的渲染，这样做的优化如下。对角移动：右下角移动translate（tx,ty）,右上角移动translate（tx，-ty），左上角移动translate（-tx，-ty）和左下角移动translate（-tx，ty）这种效果可以在鼠标单击，获得焦点，被点击或对元素任何改变种触发，并圆滑的以动画效果改变css的属性值。...
CSS2D、3D、过渡、动画基础概括
weixin_44708911的博客
09-17 196
CSS的2D转换: 可以对元素进行移动、缩放、转动、拉长或拉伸。 translate() rotate() scale() skew() matrix() transform:ratate(0deg):顺时针旋转 tansform:translate(50px,100px);右移50px，向下平移100px transform:scale(2,3)横向增大2倍，纵向增大3倍； transform:skew(amgle,angle)x轴向上倾斜y轴向上倾斜 matrix()方..
图片角度调整 适配缩放 transform scale rotate
最新发布
qq_38110067的博客
06-12 150
图片调整角度后进行缩放适配
CSS3的2D、3D变换、过度与动画效果
qq_44174803的博客
11-12 909
等待描写
android 动画x轴旋转,Android Roate3dAnimation实现围绕y轴竖直方向或者绕x轴方向旋转的3d动画效果...
weixin_28871097的博客
05-25 526
概要：~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~Roate3dAnimation 实现了围绕y轴竖直方向 或者绕x轴方向旋转的3d动画效果。这个例子来自Android APIDemo中的一个自定义View动画。他的实现展示自定义View动画的基本步骤。主要是重写initia...
CSS3中的变形处理——transform功能（旋转、缩放、倾斜、移动）
热门推荐
xuan的博客
08-23 2万+
1 transform属性 在CSS3中，可以利用transform功能实现文字或图像的旋转、缩放、倾斜、移动这4中类型的变形处理。 （1）浏览器支持 到目前为止：Safari3.1以上、Chrome8以上、Firefox4以上、Opera10以上浏览器支持该属性。  2 旋转 使用rotate方法，在参数中加入角度值，角度值后面跟表示角度单位的“deg”文字即可，旋转方向为顺时针方向。...
纯CSS3实现的3D小球动画在线演示
06-12
【标题】：“纯CSS3实现的3D小球动画在线演示” 在网页设计与开发领域，CSS3（层叠样式表第三版）的引入为设计师和开发者提供了丰富的样式和动画功能，大大增强了网页的视觉效果。本项目标题“纯CSS3实现的3D小球...
CSS3中的transform属性进行2D和3D变换的基本用法
09-24
CSS3中的transform属性是前端开发中用于元素变形的常用工具，它不仅能够实现二维（2D）空间的变换，还能完成三维（3D）空间的变换效果。在进行介绍之前，我们先要了解transform属性的基本概念和其作用。 首先，...
CSS3新增属性——过渡和动画（2D属性，3D动画）
m0_53619602的博客
06-07 3049
目录CSS3一、过渡1. 属性2. 花费时间3. 运动曲线4. 何时开始二、2D属性 2. translate（移动）2. rotate（旋转）3. scale（缩放）4. transform-origin（转换中心点）综合写法三、动画 1. 动画的使用1）.定义动画（keyframes）2） 元素使用动画 2. 动画序列3. 动画属性4. 动画属性简写四、3D动画 1. 三维坐标系 2. 3D移动 translate3d3. 透视 perspective 4. 3D旋转5. 3D呈现 （tran
transform的使用方法
说故事的五公子
08-03 1万+
transform的含义是：改变，使…变形；转换 在排版当中去合理的使用transform会使我们的排版看起来高大上那么一点。 接下来给大家介绍一下这个神奇的小东西都有什么属性会有什么效果。 1.旋转rotate rotate：通过指定的角度参数对原元素指定一个效果。 如果设置的值为正数表示顺时针旋转，如果设置的值为负数，则表示逆时针旋转。如：transform:rotate(30deg)； 2.移动translate translate() 根据左(X轴)和顶部(Y轴)位置给定的参数，从当前元素位置移动
css3 transform 变形
withwz的博客
08-10 199
文章目录transform语法坐标轴说明2D变形函数3D变形函数transform-origin属性 transform语法 transform: none|transform-functions [transform-functions]* ; 可以有多个变形 坐标轴说明 z轴是垂直屏幕指向我们的 https://codepen.io/bb798sky/pen/MNPedL 可以从这个例...
rotate(180deg) 旋转过程父元素高度压缩
weixin_43967105的博客
01-30 404
给父元素加 overflow:hidden;如果rotate过程元素内容模糊，可在发生动画的元素加 translate3d(0, 0, 0);点击按钮，icon rotate 过程中父元素高度压缩导致子元素被遮挡。rotate 过程父元素重绘导致高度发生变化。
transform、transition、animation动画效果
huhuhuja
12-02 2418
transform(变形) transition(过渡) animation(动画) 一、transform：直接改变大小和位置，显示改变的结构，没有过渡和变形的时间 transform:rotate(360deg) scale(-1.2,1.2) translate(100px,50px) skew(45deg,45deg) 通过transition:transform 1s 指定对transform起动画效果 （1）旋转rotate 利用css变形属性可以将对应的属性..
一文搞懂CSS 3D动画效果
一个非常Cool的人
01-29 7244
本文主要介绍了CSS 动画效果,不用js也可以实现。主要包括旋转、定位、透视。还有几个项目案例，欢迎大家阅读学习，如有不足请批评指正。
CSS中动画——Z轴平移，旋转，缩放
王春燕的博客
04-14 8154
一、Z轴平移 z轴平移，调整元素在z轴的位置，正常情况下调整元素和人眼之间的距离，距离越大，元素离人越近，z轴平移属于立体效果（近大远小），默认情况下网页不支持透视，如果需要看到效果，必须要设置网页的视距 1:设置视距 —perspective [pə'spektiv] 设置当前网页的视距为800px，人眼距离网页的距离，一般不小于600px —设置方式一 html{ perspective: 800px; } —设置方式二： —perspective(800px) 谷歌要直接设置在tra
CSS3的高级特效-css3变形（2D位移、2D缩放、2D旋转、2D倾斜）、行内块元素和浮动的区别
m0_64460142的博客
04-07 847
1.CSS3变形是一些效果的集合 如平移、旋转、缩放、倾斜效果 每个效果都可以称为变形（transform），它们可以分别操控元素发生平移、旋转、缩放、倾斜等 变化，设置变形函数，★ 可以是一个，也可以是多个，中间以空格分开； 变形函数 translate()：平移函数，基于X、Y坐标重新定位元素的位置 scale()：缩放函数，可以使任意元素对象尺寸发生变化 rotate()：旋转函数，取值是一个度数值，度数单位是deg skew()：倾斜函数，取值是一个度数值，度数单位是deg 注意：
CSS3动画与2D变形详解
"本资源主要介绍了CSS3中的动画特性，特别是与2D变形相关的transform属性，包括旋转、平移、缩放和倾斜等方法，并提供了相应的示例代码。此外，还提到了CSS3过渡和动画的基本概念。" 在Web开发中，CSS3引入了许多新...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值