Css3的2D转换
- 通过 CSS3 转换,我们能够对元素进行移动、缩放、转动、拉长或拉伸。
- 转换是使元素改变形状、尺寸和位置的一种效果。您可以使用 2D 或 3D 转换来转换您的元素。
- translate() 方法:通过 translate() 方法,元素从其当前位置移动,根据给定的 left(x 坐标) 和 top(y 坐标) 位置参数:值 translate(50px,100px) 把元素从左侧移动 50 像素,从顶端移动 100 像素。
- rotate() 方法:通过 rotate() 方法,元素顺时针旋转给定的角度。允许负值,元素将逆时针旋转。值 rotate(30deg) 把元素顺时针旋转 30 度。
- scale() 方法:通过 scale() 方法,元素的尺寸会增加或减少,根据给定的宽度(X 轴)和高度(Y 轴)参数:值 scale(2,4) 把宽度转换为原始尺寸的 2 倍,把高度转换为原始高度的 4 倍。
- skew() 方法:通过 skew() 方法,元素翻转给定的角度,根据给定的水平线(X 轴)和垂直线(Y 轴)参数:值 skew(30deg,20deg) 围绕 X 轴把元素翻转 30 度,围绕 Y 轴翻转 20 度。
- 新的转换属性:transform(向元素应用 2D 或 3D 转换。);transform-origin(允许你改变被转换元素的位置。)
- 2D Transform 方法: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 轴。)
7. matrix() 方法matrix() 方法把所有 2D 转换方法组合在一起。matrix() 方法需要六个参数,包含数学函数,允许您:旋转、缩放、移动以及倾斜元素。
Css3的3D转换
1.CSS3 允许您使用 3D 转换来对元素进行格式化。
2.转换是使元素改变形状、尺寸和位置的一种效果。您可以使用 2D 或 3D 转换来转换您的元素。
3.rotateX() 方法通过 rotateX() 方法,元素围绕其 X 轴以给定的度数进行旋转。
4.rotateY() 旋转通过 rotateY() 方法,元素围绕其 Y 轴以给定的度数进行旋转。
5.转换属性:
属性 |
描述 |
CSS |
向元素应用 2D 或 3D 转换。 |
3 |
|
允许你改变被转换元素的位置。 |
3 |
|
规定被嵌套元素如何在 3D 空间中显示。 |
3 |
|
规定 3D 元素的透视效果。 |
3 |
|
规定 3D 元素的底部位置。 |
3 |
|
定义元素在不面对屏幕时是否可见。 |
3 |
6.2D Transform 方法
函数 |
描述 |
matrix3d(n,n,n,n,n,n, |
定义 3D 转换,使用 16 个值的 4x4 矩阵。 |
translate3d(x,y,z) |
定义 3D 转化。 |
translateX(x) |
定义 3D 转化,仅使用用于 X 轴的值。 |
translateY(y) |
定义 3D 转化,仅使用用于 Y 轴的值。 |
translateZ(z) |
定义 3D 转化,仅使用用于 Z 轴的值。 |
scale3d(x,y,z) |
定义 3D 缩放转换。 |
scaleX(x) |
定义 3D 缩放转换,通过给定一个 X 轴的值。 |
scaleY(y) |
定义 3D 缩放转换,通过给定一个 Y 轴的值。 |
scaleZ(z) |
定义 3D 缩放转换,通过给定一个 Z 轴的值。 |
rotate3d(x,y,z,angle) |
定义 3D 旋转。 |
rotateX(angle) |
定义沿 X 轴的 3D 旋转。 |
rotateY(angle) |
定义沿 Y 轴的 3D 旋转。 |
rotateZ(angle) |
定义沿 Z 轴的 3D 旋转。 |
perspective(n) |
定义 3D 转换元素的透视视图。 |
Css3过度
- 通过 CSS3,我们可以在不使用 Flash 动画或 JavaScript 的情况下,当元素从一种样式变换为另一种样式时为元素添加效果。
- CSS3 过渡是元素从一种样式逐渐改变为另一种的效果。
- 要实现这一点,必须规定两项内容:
- 规定您希望把效果添加到哪个 CSS 属性上
- 规定效果的时长
- 如果时长未规定,则不会有过渡效果,因为默认值是 0。效果开始于指定的 CSS 属性改变值时。CSS 属性改变的典型时间是鼠标指针位于元素上时:
- 当指针移出元素时,它会逐渐变回原来的样式。
- 多项改变如需向多个样式添加过渡效果,请添加多个属性,由逗号隔开:
- 过渡属性
下面的表格列出了所有的转换属性:
属性 |
描述 |
CSS |
简写属性,用于在一个属性中设置四个过渡属性。 |
3 |
|
规定应用过渡的 CSS 属性的名称。 |
3 |
|
定义过渡效果花费的时间。默认是 0。 |
3 |
|
规定过渡效果的时间曲线。默认是 "ease"。 |
3 |
|
规定过渡效果何时开始。默认是 0。 |
3 |
Css动画
1.CSS3 动画通过 CSS3,我们能够创建动画,这可以在许多网页中取代动画图片、Flash 动画以及 JavaScript。
2.CSS3 @keyframes 规则如需在 CSS3 中创建动画,您需要学习 @keyframes 规则。@keyframes 规则用于创建动画。在 @keyframes 中规定某项 CSS 样式,就能创建由当前样式逐渐改为新样式的动画效果。
3.CSS3 动画当您在 @keyframes 中创建动画时,请把它捆绑到某个选择器,否则不会产生动画效果。通过规定至少以下两项 CSS3 动画属性,即可将动画绑定到选择器:
- 规定动画的名称
- 规定动画的时长
4.您必须定义动画的名称和时长。如果忽略时长,则动画不会允许,因为默认值是 0。
5.什么是 CSS3 中的动画?:动画是使元素从一种样式逐渐变化为另一种样式的效果。您可以改变任意多的样式任意多的次数。请用百分比来规定变化发生的时间,或用关键词 "from" 和 "to",等同于 0% 和 100%。
6.0% 是动画的开始,100% 是动画的完成。为了得到最佳的浏览器支持,您应该始终定义 0% 和 100% 选择器。
7.CSS3 动画属性
下面的表格列出了 @keyframes 规则和所有动画属性:
属性 |
描述 |
CSS |
规定动画。 |
3 |
|
所有动画属性的简写属性,除了 animation-play-state 属性。 |
3 |
|
规定 @keyframes 动画的名称。 |
3 |
|
规定动画完成一个周期所花费的秒或毫秒。默认是 0。 |
3 |
|
规定动画的速度曲线。默认是 "ease"。 |
3 |
|
规定动画何时开始。默认是 0。 |
3 |
|
规定动画被播放的次数。默认是 1。 |
3 |
|
规定动画是否在下一周期逆向地播放。默认是 "normal"。 |
3 |
|
规定动画是否正在运行或暂停。默认是 "running"。 |
3 |
|
规定对象动画时间之外的状态。 |
3 |