超级面板
文章目录
最新文章
最近更新
文章分类
标签列表
文章归档

css3特效

2016-03-31
字数: 1.9k 阅读时长: 11mins 阅读次数: 次
分类： css
标签： css

Transform 转换

Transform 属性向元素应用 2D 或 3D 转换，该属性允许我们对元素进行旋转、缩放、移动或倾斜，主要有以下几个方法：
translate()、rotate()、scale()、skew()、matrix()。

JavaScript 语法: object.style.transform="rotate(xdeg)"
Css语法：transform: none|transform-functions;

Transform 属性:

  • transform 向元素应用 2D 或 3D 转换。
  • transform-origin 允许你改变被转换元素的位置。
  • transform-style 规定被嵌套元素如何在 3D 空间中显示。
  • perspective 规定 3D 元素的透视效果。
  • perspective-origin 规定 3D 元素的底部位置。
  • backface-visibility 定义元素在不面对屏幕时是否可见。

浏览器支持:

  • Internet Explorer 10、Firefox、Opera 支持 transform 属性。
  • Safari 和 Chrome 支持替代的 -webkit-transform 属性（3D 和 2D 转换）。
  • Internet Explorer 9 要求前缀 -ms- 版本（仅适用于 2D 转换）。
  • Opera 只支持 2D 转换。

translate()

元素根据给定的 left（x 坐标） 和 top（y 坐标） 位置参数，从其当前位置移动。

  • translate(x, y) 定义 2D 转换，沿着 X 和 Y 轴移动元素。
  • translateX(n) 定义 2D 转换，沿着 X 轴移动元素。
  • translateY(n) 定义 2D 转换，沿着 Y 轴移动元素。
  • translateZ(z) 定义 3D 转化，仅使用用于 Z 轴的值。

语法：

transform: translate(x, y);
transform: translateX(n);
transform: translateY(n);

Examples:

/* 使div向左偏移10px， 向上偏移20px */
div {
2transform         : translate(10px, 20px);
2-ms-transform     : translate(10px, 20px);	/* IE 9 */
2-webkit-transform : translate(10px, 20px);	/* Safari and Chrome */
2-o-transform      : translate(10px, 20px);	/* Opera */
2-moz-transform    : translate(10px, 20px);	/* Firefox */
}

rotate()

元素旋转给定的角度。
rotate共包含三个方法：

  • rotate(n) 元素顺时针旋转给定的角度。允许负值，元素将逆时针旋转（2D转换）。
  • rotateX(x) 元素围绕其 X 轴以给定的度数进行旋转（3D转换）。
  • rotateY(y) 元素围绕其 Y 轴以给定的度数进行旋转（3D转换）。
  • rotate3d(x, y, z, angle) 定义 3D 旋转。

语法：

transform: rotate(n);
transform: rotateX(x);
transform: rotateY(y);
transform: rotate3d(x, y, z, angle);

Examples:

/* 使div顺时针旋转20° */
div {
2transform         : rotate(20deg);
2-ms-transform     : rotate(20deg);	/* IE 9 */
2-webkit-transform : rotate(20deg);	/* Safari and Chrome */
2-o-transform      : rotate(20deg);	/* Opera */
2-moz-transform    : rotate(20deg);	/* Firefox */
}

scale()

元素的尺寸会增加或减少，根据给定的宽度（X 轴）和高度（Y 轴）参数。

  • scale(x, y) 定义 2D 缩放转换，改变元素的宽度和高度。
  • scale3d(x, y, z) 定义 3D 缩放转换。
  • scaleX(x) 定义 2D 缩放转换，改变元素的宽度。
  • scaleY(y) 定义 2D 缩放转换，改变元素的高度。
  • scaleZ(z) 定义 3D 缩放转换，通过给定一个 Z 轴的值。

语法：

transform: scale(x, y);
transform: scaleX(x);
transform: scaleY(y);

Examples:

/* 使div宽度转换为原始尺寸的 2 倍，把高度转换为原始高度的 4 倍。 */
div {
2transform         : translate(2, 4);
2-ms-transform     : translate(2, 4);	/* IE 9 */
2-webkit-transform : translate(2, 4);	/* Safari and Chrome */
2-o-transform      : translate(2, 4);	/* Opera */
2-moz-transform    : translate(2, 4);	/* Firefox */
}

skew()

元素翻转给定的角度，根据给定的水平线（X 轴）和垂直线（Y 轴）参数。

  • skew(x-angle, y-angle) 定义 2D 倾斜转换，沿着 X 和 Y 轴。
  • skewX(angle) 定义 2D 倾斜转换，沿着 X 轴。
  • skewY(angle) 定义 2D 倾斜转换，沿着 Y 轴。

语法：

transform: skew(x-angle, y-angle);
transform: skewX(angle);
transform: skewY(angle);

Examples:

/* 使div 围绕 X 轴把翻转 30 度，围绕 Y 轴翻转 20 度。 */
div {
2transform         : translate(20deg, 40deg);
2-ms-transform     : translate(20deg, 40deg);	/* IE 9 */
2-webkit-transform : translate(20deg, 40deg);	/* Safari and Chrome */
2-o-transform      : translate(20deg, 40deg);	/* Opera */
2-moz-transform    : translate(20deg, 40deg);	/* Firefox */
}

matrix()

暂时跳过，后续研究

Transition 过渡

过渡是元素从一种样式逐渐改变为另一种的效果，要实现这一点，必须规定两项内容：

  • 规定您希望把效果添加到哪个 CSS 属性上
  • 规定效果的时长

当指定的 CSS 属性改变值改变出发时（比如hover,必须指定触发后会改变的style样式），过渡效果开始，如果时长未规定，则不会有过渡效果，因为默认值是 0。

语法：

transition: style time;
transition: style1 time1, style2 time2..., stylen timen;

过渡属性:

  • transition 简写属性，用于在一个属性中设置四个过渡属性。
  • transition-property 规定应用过渡的 CSS 属性的名称。
  • transition-duration 定义过渡效果花费的时间。默认是 0。
  • transition-timing-function 规定过渡效果的时间曲线。默认是 “ease”。
  • transition-delay 规定过渡效果何时开始。默认是 0。

Examples:

/*
div:hover指定了hover时的三个变化的样式：width，height和transform，在transtion属性仅仅指定了
width和transform，因此当div悬停时，width和transform会在两秒内过渡到:hover,而height没有过渡直接变化。
*/
div {
2width:100px;
2height:100px;
2background:yellow;
2transition:width 2s, transform 2s;
2-moz-transition:width 2s, height 2s, -moz-transform 2s; /* Firefox 4 */
2-webkit-transition:width 2s, height 2s, -webkit-transform 2s; /* Safari and Chrome */
2-o-transition:width 2s, height 2s, -o-transform 2s; /* Opera */
}

div:hover {
2width:200px;
2height:200px;
2transform:rotate(180deg);
2-moz-transform:rotate(180deg); /* Firefox 4 */
2-webkit-transform:rotate(180deg); /* Safari and Chrome */
2-o-transform:rotate(180deg); /* Opera */
}

浏览器支持:

  • Internet Explorer 10、Firefox、Chrome 以及 Opera 支持 transition 属性。
  • Safari 和 Chrome 25 以及更早的版本需要前缀 -webkit-。
  • Internet Explorer 9 以及更早的版本，不支持 transition 属性。

animation和@keyframes动画

@keyframes 规则用于创建动画。在 @keyframes 中规定某项 CSS 样式，就能创建由当前样式逐渐改为新样式的动画效果。
animation 用于把 @keyframes 中创建的动画捆绑到某个css选择器。
用百分比来规定变化发生的时间，或用关键词 from 和 to，等同于 0% 和 100%。0% 是动画的开始，100% 是动画的完成。
为了得到最佳的浏览器支持，应该始终定义 0% 和 100% 选择器。
必须定义动画的名称和时长。如果忽略时长，则动画不会允许，因为默认值是 0。

属性:

  • @keyframes 规定动画。
  • animation 所有动画属性的简写属性，除了 - `animation-play-state 属性。
  • animation-name 规定 @keyframes 动画的名称。
  • animation-duration 规定动画完成一个周期所花费的秒或毫秒。默认是 0。
  • animation-timing-function 规定动画的速度曲线。默认是 “ease”。
  • animation-delay 规定动画何时开始。默认是 0。
  • animation-iteration-count 规定动画被播放的次数。默认是 1。
  • animation-direction 规定动画是否在下一周期逆向地播放。默认是 “normal”。
  • animation-play-state 规定动画是否正在运行或暂停。默认是 “running”。
  • animation-fill-mode 规定对象动画时间之外的状态。

Examples:

/*
@keyframes 定义一个动画
动画开始时背景颜色为red，当动画进度为100%时，背景颜色为yellow
*/
@keyframes frames {
2from {
22background: red;
2}
2to {
22background: yellow;
2}
}
/* 或者： */
@keyframes frames {
20% {
22background: red;
2}
2100% {
22background: yellow;
2}
}
/* Firefox */
@-moz-keyframes frames {
2from {
22background: red;
2}
2to {
22background: yellow;
2}
}
/* Safari 和 Chrome */
@-webkit-keyframes frames {
2from {
22background: red;
2}
2to {
22background: yellow;
2}
}
/* Opera */
@-o-keyframes frames {
2from {
22background: red;
2}
2to {
22background: yellow;
2}
}

/* animation 把 "frames" 动画捆绑到 div 元素，时长：5 秒： */
div {
2animation: frames 5s;
2-moz-animation: frames 5s;	/* Firefox */
2-webkit-animation: frames 5s;	/* Safari 和 Chrome */
2-o-animation: frames 5s;	/* Opera */
}

浏览器支持:

  • Internet Explorer 10、Firefox 以及 Opera 支持 @keyframes 规则和 animation 属性。
  • Chrome 和 Safari 需要前缀 -webkit-。
  • Internet Explorer 9，以及更早的版本，不支持 @keyframes 规则或 animation 属性。

参考：

[1.CSS3 教程](http:/* www.w3school.com.cn/css3/index.asp)

进阶：

[1.理解CSS3 transform中的Matrix(矩阵)](http:/* blog.csdn.net/henren555/article/details/9699449)
[2.好吧，CSS3 3D transform变换，不过如此！](http:/* www.zhangxinxu.com/wordpress/2012/09/css3-3d-transform-perspective-animate-transition/)

×