目录
(3)、transition-timing-function
前言
CSS中,过渡(transition)、 变形(transform)、动画(animation)这三个属性有着类似的作用,他们各有优缺点。其中,我们可以设置过渡的参数为变形,过渡也可以用来完成只有开始状态和终点状态这两种状态的简单动画,并且需要事件触发,动画(animation)就可以完成更为复杂的动画。今天我们了解一下每一个的作用,以及他们的区别。
属性 | 含义 |
---|---|
过渡(transition) | CSS 过渡允许您在给定的时间内平滑地改变属性值。和animation有着类似的效果,但细节上有很大的不同。 |
变形(transform) | CSS 转换(transforms)允许您移动、旋转、缩放和倾斜元素。和设置样式的动画并没有什么关系,就相当于color一样用来设置元素的“外表” |
动画(animation) | css动画属性,CSS 可实现 HTML 元素的动画效果,而不使用 JavaScript 或 Flash! |
一、变形(transform)
属性 |
描述 |
---|---|
向元素应用 2D 或 3D 转换。 |
|
用于指定元素变形的中心点 |
语法: transform:none | transform-function
- none:不变形
- transform-function:指定变形函数
变形操作都是以元素的中心点为基准进行的,如果需要改变这个中心点,可以使用transform-origin属性。
- transform-origin: x-axis y-axis z-axis;
转换属性:
- transform-origin :用于指定元素变形的中心点
- transform-style :指定舞台为2D或3D,值为flat表示2D,preserve-3d表示3D。
注意,在变形元素自身上指定该属性是没有用的,它用于指定舞台,所以要在变形元素的父 元素上设置该属性。设定后,所有子元素共享该舞台。
- perspective :指定3D的视距
指定3D的视距。默认值是none表示无3D效果,即2D扁平化。
实现3D的关键就是要有perspective
视距
- perspective-origin: 视距的基点
基点默认值是50% 50%即center,表示视距基点在中心点不进行任何位移。
- backface-visibility :是否可以看见3D舞台背面
默认值visible表示背面可见,可以设成hidden让背面不可见。
1、2D变换
变形函数 | 描述 |
---|---|
matrix(n,n,n,n,n,n) | 定义 2D 转换,使用六个值的矩阵。 |
translate(x,y) | 定义 2D 转换,沿着 X 和 Y 轴移动元素。 |
translateX(n) | 定义 2D 转换,沿着 X 轴移动元素。 |
translateY(n) | 定义 2D 转换,沿着 Y 轴移动元素。 |
scale(x,y) | 定义 2D 缩放转换,改变元素的宽度和高度。 |
scaleX(n) | 定义 2D 缩放转换,改变元素的宽度。 |
scaleY(n) | 定义 2D 缩放转换,改变元素的高度。 |
rotate(angle) | 定义 2D 旋转,在参数中规定角度。 |
skew(x-angle,y-angle) | 定义 2D 倾斜转换,沿着 X 和 Y 轴。 |
skewX(angle) | 定义 2D 倾斜转换,沿着 X 轴。 |
skewY(angle) | 定义 2D 倾斜转换,沿着 Y 轴。 |
(1)、translate() 方法
将对象沿 X 轴和 Y 轴平移,该函数需要提供 1~2 个参数,第一个参数对应 X 轴,第二个参数对应 Y 轴,如果未提供第二个参数,则默认值为 0;两个参数均可以为负值。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#d1{
height: 200px;
width: 150px;
background-color:brown;
border: 1px solid black;
}
#d2{
height: 200px;
width: 150px;
background-color:brown;
border: 1px solid black;
transform: translate(100px,100px);
}
</style>
</head>
<body>
<div id="d1">元素原来的位置
默认中心点在元素正中心
</div>
<div id="d2">该 div 元素从其当前位置向右移动 100个像素,并向下移动 100 个像素。</div>
</body>
</html>
(2)、rotate() 方法
根据给定的角度顺时针或逆时针旋转元素,在函数的参数中可以指定旋转的角度。
正值表示顺时针,负值表示逆时针。
transform: rotate(30deg);
(3)、scale() 方法
将对象进行缩放,该函数需要提供 1~2 个参数,第一个参数对应 X 轴,第二个参数对应 Y 轴,如果未提供第二个参数,则默认取第一个参数的值。
scale还能设负数,负数会先将元素反转再缩放。
提示:当 scale() 中,给定的参数值在 -1~1 范围之外时,元素将被放大;当在参数值在 -1~1 范围之内时,元素将被缩小。
transform: scale(1.8); /*缩放到原来的80% */