huandie2012
commented
7 years ago 喜欢或者对您有帮助的话，请在右上方赠送一颗小星星作为鼓励吧，灰常感谢^-^
Open huandie2012 opened 7 years ago
huandie2012
commented
7 years ago 喜欢或者对您有帮助的话，请在右上方赠送一颗小星星作为鼓励吧，灰常感谢^-^
实现元素的2D和3D转换transform：
transform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。 浏览器支持： Internet Explorer 10、Firefox 以及 Opera 支持 transform 属性；Chrome 和 Safari 需要前缀 -webkit-；Internet Explorer 9 需要前缀 -ms-。 Opera 仍然不支持 3D 转换（它只支持 2D 转换）。 需要用到的转换方法： matrix、translate、scale、rotateX、skew、perspective 语法： transform：none|matrix(n,n,n,n,n,n)（把所有2D转换方法组合在一起）|matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n)|translate(x,y)（2D移动）|transkate3d(x,y,z)（3D移动）|translateX(x)（X轴）|translateY(y)（Y轴）|translateZ(z)（Z轴）|scale(x,y)（2D缩放，数值表示缩放到原来宽高的倍数）|scale3d(x,y,z)（3D缩放）|scaleX(x)|scaleY(y)|scaleZ(z)|rotate(angle)（2D旋转，正直是顺时针、负值是逆时针）|rotate3d(x,y,z,angle)（3D旋转）|rotateX(angle)|rotateY(angle)|rotateZ(angle)|skew(x-angle,y-angle)（沿着 X 和 Y 轴的 2D 倾斜，元素翻转给定的角度）|skewX(angle)|skewY(angle)|perspective(n)（为 3D 转换元素定义透视视图）
transform-origin：
设置元素转换的基点位置（参照点），也就是该元素围绕着那个点变形或旋转，使用此属性必须先使用transform属性。在没设置这个属性的情况下，元素都是以元素自己中心位置进行变化的。 语法： transform-origin: x-axis y-axis z-axis; x-axis：定义视图被置于 X 轴的何处。可能的值：left；center；right；length；%；em；px y-axis：定义视图被置于 Y 轴的何处。可能的值：top；center；bottom；length；%；em；px z-axis：定义视图被置于 Z 轴的何处。可能的值：length
transform-origin：
transform-style 属性规定如何在 3D 空间中呈现被嵌套的元素。 语法： transform-style: flat|preserve-3d; flat | 子元素将不保留其 3D 位置。 preserve-3d | 子元素将保留其 3D 位置。
perspective ：
perspective 属性定义 3D 元素距视图的距离，以像素计。该属性允许您改变 3D 元素查看 3D 元素的视图；当为元素定义 perspective 属性时，其子元素会获得透视效果，而不是元素本身。 注释：perspective 属性只影响 3D 转换元素。 提示：请与 perspective-origin 属性一同使用该属性，这样您就能够改变 3D 元素的底部位置。 目前浏览器都不支持 perspective 属性；Chrome 和 Safari 支持替代的 -webkit-perspective 属性。 语法： perspective: number|none; number | 元素距离视图的距离，以像素计。 none | 默认值。与 0 相同。不设置透视。
perspective-origin ：
perspective-origin 属性定义 3D 元素所基于的 X 轴和 Y 轴。该属性允许您改变 3D 元素的底部位置。 当为元素定义 perspective-origin 属性时，其子元素会获得透视效果，而不是元素本身。 注释：该属性必须与 perspective 属性一同使用，而且只影响 3D 转换元素。 目前浏览器都不支持 perspective-origin 属性；Chrome 和 Safari 支持替代的 -webkit-perspecitve-origin 属性。 语法： perspective-origin: x-axis y-axis;
backface-visibility：
backface-visibility 属性定义当元素不面向屏幕时是否可见；如果在旋转元素不希望看到其背面时，该属性很有用。 只有 Internet Explorer 10+ 和 Firefox 支持 backface-visibility 属性；Opera 15+、Safari 和 Chrome 支持替代的 -webkit-backface-visibility 属性。 语法： backface-visibility: visible|hidden; visible | 背面是可见的。 hidden | 背面是不可见的。
CSS3 过渡transition：
通过 CSS3，我们可以在不使用 Flash 动画或 JavaScript 的情况下，当元素从一种样式变换为另一种样式时为元素添加效果。 要实现这一点，必须规定两项内容： 规定您希望把效果添加到哪个 CSS 属性上，如果有好多样式属性都需要添加过渡效果，请添加多个属性，由逗号隔开，也可以用all代替；规定效果的时长，如果时长未规定，则不会有过渡效果，因为默认值是 0。 Internet Explorer 10、Firefox、Chrome 以及 Opera 支持 transition 属性。 Safari 需要前缀 -webkit-。 注释：Internet Explorer 9 以及更早的版本，不支持 transition 属性。 注释：Chrome 25 以及更早的版本，需要前缀 -webkit-。 transition属性值从左到右包含四个，分别是：transition-property（规定应用过渡的 CSS 属性的名称）、transition-duration（定义过渡效果花费的时间，默认是 0）、transition-timing-function（规定过渡效果的时间曲线，默认是 "ease"）、transition-delay（规定过渡效果何时开始，默认是 0）
CSS3 动画animation、@keyframes：
通过 CSS3，我们能够创建动画，这可以在许多网页中取代动画图片、Flash 动画以及 JavaScript。 @keyframes 规则用于创建动画。在 @keyframes 中规定某项 CSS 样式，就能创建由当前样式逐渐改为新样式的动画效果。 什么是 CSS3 中的动画？ 动画是使元素从一种样式逐渐变化为另一种样式的效果。 您可以改变任意多的样式任意多的次数。（这个大概是和transition的过渡动画在选择上的区别了，过渡只能执行一次，animation可以执行多次） 请用百分比来规定变化发生的时间，或用关键词 "from" 和 "to"，等同于 0% 和 100%。 0% 是动画的开始，100% 是动画的完成。 为了得到最佳的浏览器支持，您应该始终定义 0% 和 100% 选择器。 Internet Explorer 10、Firefox 以及 Opera 支持 @keyframes 规则和 animation 属性。 Chrome 和 Safari 需要前缀 -webkit-。 注释：Internet Explorer 9，以及更早的版本，不支持 @keyframe 规则或 animation 属性。 animation属性值从左到右包含八个，分别是：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（规定对象动画时间之外的状态）
CSS3常用的一些样式，比较简单，列举出来就不一一介绍了^-^
border-radius、box-shadow、border-image box-shadow（给盒子元素添加阴影）：h-shadow v-shadow blur spread color inset; （h-shadow | 必需。水平阴影的位置。允许负值；v-shadow | 必需。垂直阴影的位置。允许负值；blur | 可选。模糊距离；spread | 可选。阴影的尺寸；color | 可选。阴影的颜色。请参阅 CSS 颜色值；inset | 可选。将外部阴影 (outset) 改为内部阴影。） CSS3中包含几个新的背景属性background-image、background-size（length|percentage|cover|contain;）、background-origin（padding-box|border-box|content-box;）、background-clip（border-box|padding-box|content-box;）
自己在做动画过程中遇到的一些CSS3属性
attr() 语法：attr() = attr(attr-name) 插入元素的属性值。即用data-*定义的元素中的属性值或者是元素自带的属性，比如a标签中的href属性，img标签中的title属性等等； 在CSS2.1中attr()总是返回一个字符串。在CSS3中attr()可以返回多种不同的类型。