转换（transform）是CSS3中具有颠覆性的特征之一，可以实现元素的位移、旋转、缩放等效果
转换（transform）你可以简单理解为变形
移动：translate
旋转：rotate
缩放：scale
一、移动
二维坐标系：
2D转换是改变标签在二维平面上的位置和形状的一种技术，先来学习二维坐标系
2D转换之移动translate
2D移动是2D转换里面的一种功能，可以改变元素在页面中的位置，类似定位
1、语法
transform：translate（x，y）;
或者分开写
transform:translateX(n);
transform:translateY(n);
<body>
<div></div>
</body>
<style>
div{
width:200px;
height: 200px;
background-color: pink;
/* x就是X轴上移动位置，y就是Y轴上移动位置，中间用逗号分割，如果Y轴不移动写0，不可以省略
transform: translate(x,y); */
transform:translate(100px,100px)
}
</style>重点：
- 定义2D转换中的移动，沿着X和Y轴移动
- translate最大的优点：不会影响到其他元素的位置
- translate中的百分比单位是相对于自身元素的宽高， translate：(50%,50%)
- 对行内标签没有效果
实现效果：实现子盒子在父盒子中垂直居中、水平居中
<body>
<div>
<p></p>
</div>
</body>
<style>
div {
width: 500px;
height: 500px;
background-color: pink;
position: relative;
}
p {
position: absolute;
width: 200px;
height: 200px;
background-color: purple;
margin-top: 50%;
margin-left: 50%;
//之前写法
//margin-top:-100px
//margin-lefft:-100px 盒子往上走自己的高度宽度的一半
transform: translate(-50%,-50%);
}
</style>二、旋转
2D旋转指的是让元素在2维平面内顺时针旋转或逆时针旋转
语法：
transform:rotate(度数)
重点
- rotate里面跟度数，单位是deg，比如rotate（45deg）
- 角度为正时，顺时针，负时，为逆时针
- 默认旋转的中心点是元素的中心点
<body>
<div>
</div>
</body>
<style>
div {
width: 500px;
height: 500px;
background-color: pink;
margin:200px auto;
/* 过度写到本身上，谁做动画给谁加 */
transition: all 0.3s;
}
div:hover{
/* 顺时针旋转45° */
transform: rotate(360deg);
}
</style>案例：input框里面的三角形
<body>
<div></div>
</body>
<style>
div {
position: relative;
width: 249px;
height: 35px;
border: 1px solid #000;
}
div::after{
content: "";
/* 伪元素生成的是一个行内元素是没有大小的,所以要给宽高 */
position: absolute;
top: 8px;
right: 15px;
width: 10px;
height: 10px;
border-right: 1px solid #000;
border-bottom: 1px solid #000;
transform: rotate(45deg);
transition: all 0.2s;
}
/* 鼠标经过div 里面的三角旋转 */
div:hover::after {
transform: rotate(225deg);
}
</style>2D转换中心点transform-origin(设置元素旋转的中心点)
语法
transform-origin:x y;
重点
- 注意后面的参数 x和y 用空格隔开
- xy默认转换的中心点是元素的中心点（50% 50%）
- 还可以给x y设置像素或者方位名词（top bottom left right center）
<body>
<div></div>
</body>
<style>
div {
width: 200px;
height: 200px;
background-color: pink;
margin: 100px auto;
transition: all 1s;
transform-origin: left bottom;
}
div:hover {
transform: rotate(360deg);
}
</style>案例：旋转案例
<body>
<div></div>
</body>
<style>
div {
width: 200px;
height: 200px;
background-color: pink;
margin: 100px auto;
transition: all 1s;
transform-origin: left bottom;
}
div:hover {
transform: rotate(360deg);
}
</style>2D转之缩放scale
缩放，顾名思义，可以放大和缩小，只要给元素添加上了这个属性就能控制它放大还是缩小
语法:
transform:scale(x,y);
重点：
- 注意其中的x和y用逗号分割
- transform:scale(1,1)：宽和高都放大一倍，相当于没有放大
- transform:scale(2,2)：宽和高都放大了2倍
- transform:scale(2)：只写一个参数，第二个参数则和第一个参数一样，相当于scale(2,2)
- transform:scale(0.5,0.5)：缩小
- scale缩放的最大优势：可以设置转换中心点缩放，默认以中心点缩放的，而且不影响其他盒子
案例：图片放大案例
<body>
<div>
<a href="#">
<img src="C:\Users\19280\Pictures\Saved Pictures\樱花.webp">
</a>
</div>
<div>
<a href="#">
<img src="C:\Users\19280\Pictures\Saved Pictures\樱花.webp">
</a>
</div>
<div>
<a href="#">
<img src="C:\Users\19280\Pictures\Saved Pictures\樱花.webp">
</a>
</div>
</body>
<style>
div {
float: left;
margin: 10px;
height: 200px;
overflow: hidden;
}
img {
height: 200px;
transition: all 1s;
}
div img:hover {
transform: scale(1.05);
}
div:hover{
border: 3px solid skyblue;
}
</style>案例：分页按钮
<body>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
</body>
<style>
div {
margin: 15px;
float: left;
width: 50px;
height: 50px;
border-radius: 25px;
border: 1px solid green;
transition: all 0.7s;
text-align: center;
line-height: 50px;
cursor: pointer;
}
div::after {
margin: auto auto;
}
div:hover {
transform: scale(1.1);
}
</style>2D转换综合写法以及顺序问题
注意：
- 同时使用多个转换，其格式为：transform:translate() rotate() scale()....等
- 其顺序会影响转换的效果（先旋转会改变坐标轴的方向）
- 当我们同时有位移和其他属性的时候，记得将位移放到最前面
动画
动画（animation）是CSS3中具有颠覆性的特征之一，可通过设置多个节点来精确控制一个或一组动画，常用来实现复杂的动画效果
相比较过渡，动画可以实现更多变化，更多控制，连续自动播放等效果
动画的基本使用：
制作动画分为两步：
1、先定义动画
//用keyframes定义动画（类似定义类选择器）
@keyframes 动画名称 {
0%{
width:100px;
}
100%{
width:200px;
}
}动画序列：
0%是动画的开始，100%是动画的完成。这样的规则就是动画序列 在@keyframes中规定某项CSS样式，就能创建由当前样式逐渐改为新样式的动画效果 动画是使元素从一种样式逐渐变化为另一种样式的效果，你可以改变任意多的样式任意多的次数 请用百分比来规定变化发生的事件，或用关键词"from"和"to"，等同于0%和100%
2、再使用（调用）动画
div {
width:200px;
height:200px;
background-color:aqua;
margin:100px auto;
//调用动画
animation-name:动画名称;
//持续时间
animation-duration:持续时间;
}<body>
<!-- 我们像页面一打开，一个盒子就从左边走到右边 -->
<div></div>
</body>
<style>
/* 定义动画 */
@keyframes move {
0% {
/* 开始状态 */
transform: translateX(0px);
}
100% {
/* 结束状态 */
transform: translateX(1000px);
}
}
div {
width: 200px;
height: 200px;
background-color: pink;
/* 调用动画 */
animation-name: move;
/* 持续时间 */
animation-duration: 5s;
}
</style>动画序列
<body>
<!-- 我们像页面一打开，一个盒子就从左边走到右边 -->
<div></div>
</body>
<style>
/* 定义动画 */
/*里面的百分比就是 总的时间的划分*/
@keyframes move {
0% {
transform: translate(0,0);
}
25% {
transform: translate(1000px,0);
}
50% {
transform: translate(1000px,500px);
}
75% {
transform: translate(0,500px);
}
100% {
transform: translate(0,0);
}
}
div {
width: 200px;
height: 200px;
background-color: pink;
/* 调用动画 */
animation-name: move;
/* 持续时间 */
animation-duration: 5s;
}
</style>动画常用属性
| 属性 | 描述 |
| @keyframes | 规定动画 |
| animation | 所有动画属性的简写属性，除了animation-play-state属性 |
| animation-name | 规定@keyframes动画名称（必须的） |
| animation-duration | 规定动画完成一个周期所花费的秒或毫秒，默认是0（必须的） |
| animation-timing-function | 规定动画的速度曲线，默认是"ease" |
| animation-delay | 规定动画合适开始，默认是0 |
| animation-iteration-count | 规定动画被播放的次数，默认是1，还有infinite |
| animation-direction | 规定动画是否再下一周期逆向播放，默认是"normal",alternate逆播放 |
| animation-play-state | 规定动画是否正在运行或者暂停，默认是"running",还有"paused" |
| animation-fill-mode | 规定动画结束后状态，保持forwards回到起始backwards |
<body>
<!-- 我们像页面一打开，一个盒子就从左边走到右边 -->
<div></div>
</body>
<style>
div {
width: 100px;
height: 100px;
background-color: pink;
/* 何时开始 */
animation-delay: 2s;
/* 重复次数 */
animation-iteration-count: infinite;
/* 是否反方向播放 */
animation-direction: alternate;
/* animation-fill-mode: backwards; */
}
/* 定义动画 */
@keyframes move {
0% {
transform: translate(0,0);
}
25% {
transform: translate(1000px,0);
}
50% {
transform: translate(1000px,500px);
}
75% {
transform: translate(0,500px);
}
100% {
transform: translate(0,0);
}
}
div {
width: 200px;
height: 200px;
background-color: pink;
/* 调用动画 */
animation-name: move;
/* 持续时间 */
animation-duration: 5s;
}
div:hover {
/* 鼠标经过div 让这个div停止动画，鼠标离开就继续动画 */
animation-play-state: paused;
}
</style>CSS动画简写
animation：动画名称 持续时间 运动曲线 何时开始 播放次数 是否反方向 动画起始状态或结束的状态
- 简写属性里面不包含animation-play-state
- 暂停动画：animation-play-state：puased;经常和鼠标经过等其他配合使用
- 想要动画走回来，而不是直接跳回来：animation-direction:alternate
- 盒子动画结束后，停在结束位置：animation-fill-mode:forwards
1066
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
