一、transform概念
transform的作用：允许对某一个元素进行某些形变，包括旋转、缩放、倾斜、平移等- 并非所有盒子都可以机进行
transform形变。通常行内级元素不能进行形变。- 例如：
span元素、a元素
- 例如：
二、transform的用法
常见的函数 transform function：
- 平移：
translate(x, y) - 缩放：
scale(x, y) - 旋转：
rotate(x, y) - 倾斜：
skew(deg, deg)
三、平移：translate(x, y)
- 平移：
translate(x, y)- 这个函数用于移动元素在平面上的位置
- 值的个数：
- 一个值：设置
x轴上的位移 - 两个值：设置
x轴和y轴上的位移
- 一个值：设置
- 值类型
-
具体数值（100px）
-
百分比（参照元素本身）
- 如果设置
x位移：参考的就是自身的宽度 - 如果设置
y位移：参考的就是自身的高度
- 如果设置
-
四、translate 的补充
-
translate是translateX和translateY函数的缩写。-
设置
x轴：translateX
-
设置
y轴：translateY
-
-
translate的百分比可以完成一个元素的水平和垂直居中
html
<!DOCTYPE html>
<html>
<head>
<title>Document</title>
<style>
.container {
height: 500px;
width: 500px;
border: 5px solid red;
display: inline-block;
background-color: antiquewhite;
}
.box1 {
height: 200px;
width: 200px;
background-color: aqua;
/* transform: translate(100px); */
/* transform: translate(50%, 50%); */
/* transform: translateX(20%); */
position: relative;
top: 50%;
transform: translateY(-50%);
}
</style>
</head>
<body>
<div class="container">
<div class="box1">box1</div>
</div>
</body>
</html>五、缩放：scale(x, y)
-
缩放：
scale(x, y)- 改变元素的大小
-
值个数
-
一个值：设置
x轴上的缩放。（y轴默认也是一样的值）
-
两个值：设置
x轴和y轴上的缩放
-
-
值类型
- 数字
1：保持不变2：放大一倍0.5：缩小一半
- 百分比：不常用
- 数字
-
scale是scaleX和scaleY函数的缩写。- 设置
x轴：scaleX - 设置
y轴：scaleY
- 设置
html
<!DOCTYPE html>
<html>
<head>
<title>Document</title>
<style>
.container {
height: 200px;
width: 200px;
border: 5px solid red;
display: inline-block;
background-color: antiquewhite;
}
.box1 {
height: 200px;
width: 200px;
background-color: aqua;
/* transform: scale(0.5); */
transform: scale(0.5, 0.3);
}
</style>
</head>
<body>
<div class="container">
<div class="box1">box1</div>
</div>
</body>
</html>六、旋转：rotate(x, y)
- 值个数
- 一个值：表示旋转角度
- 值类型
- 常用单位
deg：表示旋转角度 - 正数：顺时针旋转
- 负数、逆时针旋转
- 常用单位
rotate是rotateZ函数的缩写。rotate有很多单位- 角度（
deg） - 百分度（
grad） - 弧度（
rad） - 圈数（
turn）
- 角度（
七、transform-origin
- 进行旋转或者说缩放的时候，都会有一个原点，所以
transform-origin的作用就是：修改当前形变的原点位置 - 语法：
transform-origin: x-axis y-axis z-axis;
CSS3之transform-origin详解
CSS3新属性篇(二)：transform-origin属性 - 值类型
- 必须是长度
<length>、百分比percentage、或者left、center、right、top、bottom关键字中的一个left、center、right、top、bottom关键字- 长度
<length>：从左上角开始计算 - 百分比
percentage：参考元素本身的大小
- 必须是长度
html
<!DOCTYPE html>
<html>
<head>
<title>Document</title>
<style>
.container {
height: 200px;
width: 200px;
border: 5px solid red;
display: inline-block;
background-color: antiquewhite;
margin-left: 500px;
margin-top: 300px;
}
.box1 {
height: 200px;
width: 200px;
background-color: aqua;
/* transform: rotate(25deg) */
transform-origin: 100% 50%;
transform: rotate(90deg)
}
</style>
</head>
<body>
<div class="container">
<div class="box1">box1</div>
</div>
</body>
</html>八、倾斜：skew(deg, deg)
- 定义了一个元素在二维平面的倾斜转换
- 值个数
- 一个值：表示
x轴上的倾斜 - 两个值：表示
x轴和y轴的倾斜
- 一个值：表示
- 值类型
deg：旋转角度- 正数：顺时针旋转
- 负数：逆时针旋转
- 注意：倾斜原点受到
transform-origin影响
九、transform 多个值
十、transition概念
- 什么是
transition动画：- 提供一种更改
css属性时控制动画速度的方法。 - 让css的属性变化成为一种：有持续时间的过程，而不是立即生效
- 例如：将一个元素的位置移动到另一个位置，默认是设置完立即生效
- 使用
transition后，可以看到有个动画效果，和PPT中显示内容一样，有缓慢变化的过程。
- 提供一种更改
CSS transition可以决定：- 哪些属性发生动画效果
- 何时开始（设置
delay） - 持续多久（设置
duration） - 如何动画（定义
timing function，比如匀速缓慢或者先快后慢）
十一、常用的transition
