好烦好烦好烦好烦好烦好烦好烦好烦好烦好困好困好困好困好困好困

transform:sacle(x,y) 缩放

缩放 x y放倍数宽度，高度
注意其中x y用逗号分隔
可以是小数
不会影响其他盒子

鼠标经过时图片放大所以只要注意hover是放在图片img内而不是div 利用overflow:hidden将放大后图片多余部分隐藏起来

分页按钮案例

2D转换综合写法

注意：

同时使用多个转换，其格式为: transform: translate()rotate()scale()....等
其顺序会影响转换的效果，（先旋转会改变坐标轴方向）
当我们同时有位移和其他属性的时候，记得要将位移放到最前面

CSS3 动画

动画（animation）是CSS3中具有颠覆性的特征之一，可以通过设置多个节点来精确控制一个或一组动画，常用于实现复杂的动画效果

相比较过渡，动画可以实现更多变化，更多控制，连续自动播放等效果

动画的基本使用

制作动画分为两步：

先定义动画
再使用（调用）动画

1.用 keyframes 定义动画（类似定义类选择器）

@keyframes 动画名称 {

0% {

width:100%;

}

100%{

width:200px;

}

}

2.动画序列

0%动画的开始，100%是动画的完成。这样的规则就是动画序列。
在@keyframes中规定某项CSS样式，就能创建由当前样式逐渐改为新样式的动画效果
动画是使元素从一种样式逐渐变化为另一种样式的效果。您可以改变任意多的样式任意多的次数
请用百分比来规定变化发生的时间，或用关键词"from”和"to”，等同于0%和100%。

2.元素使用动画

div {

width:20px;

height:20px;

background-color: aqua;

margin: 100px auto;

/调用动画/

animation-name: 动画名称

持续时间

animation-duration: 持续时间

}

动画常用的属性

动画简写属性

animation :动画名称持续时间运动曲线何时开始播放次数是否反方向动画起始或结束状态

animation: myfirst 5s linear 2s infinte alternate;

linear 匀速

前面两个属性必须要写 name duration

简写属性里面不包含 animation-play-state 需要单独拎出来写
暂停动画：animation-play-state: puased: 经常和鼠标经过等其他配合使用
盒子动画结束后，停在结束位置: animation-fill-mode: forwards

速度曲线细节

animation-timing-function:规定动画的速度曲线，默认是“ease'

值描述 linear 动画从头到尾的速度是相同的。匀速 ease 默认。动画以低速开始，然后加快，在结束前变慢 ease-in 动画以低速开始。 ease-out 动画以低速结束 ease-in-out 动画以低速开始和结束。 steps0 指定了时间函数中的间隔数量(步长)

奔跑的熊大案例

一张图有不同熊跑步的状态把每一个状态都装进盒子里其余隐藏而盒子总宽度1600 有8个状态盒子200px才能装下每一个状态

添加多个动画用逗号隔开就行

CSS3 3D转换

我们生活的环境是3D的，照片就是3D物体在2D平面呈现的例子

有什么特点

近大远小
物体后面遮挡不可见

当我们在网页上构建3D效果的时候参考这些特点就能产出3D效果

三维坐标系

我要补课三维坐标系

x轴：水平向右 注意： x右边是正值，左边是负值
y轴：垂直向下：注意：y下面是正值，上面是负值
z轴：垂直屏幕 注意：往外面是正值，往里面是负值

3D转换我们主要学习工作中最常用的3D位移和3D旋转

主要知识点：

3D位移：translate3d(x,y)
3D旋转：rotate3d(x,y,z)
透视：perspective
3D呈现 transform-style

明天继续学习3D 学习perspective透视就能了解更清楚了

2D转换动画 3D转换相关推荐

2D转换+动画+3D转换
文章目录 2D转换 translate 实现盒子的竖直和水平居中 rotate origin 缩放scale 综合写法渐变动画动画序列基本使用动画属性 3D转换 3D移动translate3 ...
2D转换 + 动画 + 3D转换
1. 2D 转换转换(transform)是CSS3中最具有颠覆性的特性之一,可以实现元素的位移.旋转.缩放等效果移动:translate 旋转:rotate 缩放:scale 1.1 二维坐标系 ...
CSS3的2D转换和3D转换，你了解了嘛？
css3的2D转换和3D转换 CSS3大纲: 本次讲解css3带来了两种转换:2D转换和3D转换 1. 2D转换转换( transform)是CSS3中具有颠覆性的特征之一,可以实现元素的位移(tr ...
六、CSS 速览 —— 平面转换、3D转换、动画
平面转换.3D转换.动画字体图标 iconfont 阿里图标库从图标库引用素材平面转换 transition: all 1s; 设置元素变换动画 transform: translate(px, ...
CSS3新特性详解(三)：CSS3 2D转换和3D转换 transform 变形使用详解
关于CSS3新特性,在上篇博文中"CSS3新特性详解(二):CSS3 字体@font-face详解.如何创建和修改woff字体文件及text-shadow等文本效果",讨论了C ...
html3d转换,CSS3 3D 转换
# CSS3 3D 转换 ## 3D 转换 CSS3 允许您使用 3D 转换来对元素进行格式化. 在本章中,您将学到其中的一些 3D 转换方法: * rotateX() * rotateY() 点击下 ...
CSS3之2D转换、3D转换
前言:可以配合我上一期博客(过渡与动画)一起看CSS3之过渡与动画 https://blog.csdn.net/weixin_45707229/article/details/125642353 2D ...
2D转换和3D转换 transform
目录一.转换的概念二.2D转换 2.1 translate 2.2 scale 2.3 rotate 2.4 变形原点三.3D转换 3.1 景深 3.2 实现3d效果 3.3 3D位移 3.4 ...
css3之[2D转化,动画,3D转化] 彩蛋之3D立方体
css3 新特性之2D 1. 2D转化-位移语法:/* 1.单个写 *//* 转换 transform*//* 沿着X轴方向移动 translateX*/transform: translateX( ...

2D转换动画 3D转换

transform:sacle(x,y) 缩放

分页按钮案例

2D转换综合写法

CSS3 动画

动画的基本使用

1.用 keyframes 定义动画（类似定义类选择器）

2.动画序列

动画常用的属性

动画简写属性

速度曲线细节

奔跑的熊大案例

CSS3 3D转换

有什么特点

三维坐标系

2D转换动画 3D转换相关推荐

最新文章

热门文章

2D转换 动画 3D转换

transform:sacle(x,y) 缩放

分页按钮案例

2D转换综合写法

CSS3 动画

动画的基本使用

1.用 keyframes 定义动画（类似定义类选择器）

2.动画序列

动画常用的属性

动画简写属性

速度曲线细节

奔跑的熊大案例

CSS3 3D转换

有什么特点

三维坐标系

2D转换 动画 3D转换相关推荐

最新文章

热门文章

2D转换动画 3D转换

2D转换动画 3D转换相关推荐