第9章-CSS3高级应用.pptVIP

2D转换 9.2.2 9.2 变形 rotate()方法旋转示意图 2D转换 9.2.2 9.2 变形 中心点 变形操作都是以元素的中心点为基准进行的，如果需要改变这个中心点，可以使用transform-origin属性。 基本语法格式 transform-origin: x-axis y-axis z-axis; 2D转换 9.2.2 9.2 变形 中心点 transform-origin属性包含三个参数，其默认值分别为50% 50% 0，各参数的具体含义 参数 描述 x-axis 定义视图被置于X轴的何处。可能的值有： left center right length % y-axis 定义视图被置于Y轴的何处。可能的值有： top center bottom length % z-axis 定义视图被置于Z轴的何处。可能的值有： length 3D转换 9.2.3 9.2 变形 基本语法格式 transform:rotateX(a); 参数a用于定义旋转的角度值，单位为deg，其值可以是正数也可以是负数。如果值为正，元素将围绕X轴顺时针旋转；反之，如果值为负，元素围绕X轴逆时针旋转。 3D转换 9.2.3 9.2 变形 基本语法格式 transform:rotateY(a); 参数a与rotateX(a)中的a含义相同，用于定义旋转的角度。如果值为正，元素围绕Y轴顺时针旋转；反之，如果值为负，元素围绕Y轴逆时针旋转。 3D转换 9.2.3 9.2 变形 基本语法格式 rotate3d(x,y,z,angle); x：代表横向坐标位移向量的长度。 y：代表纵向坐标位移向量的长度。 z：代表Z轴位移向量的长度。此值不能是一个百分比值，否则将会视为无效值。 angle：角度值，主要用来指定元素在3D空间旋转的角度，如果其值为正，元素顺时针旋转，反之元素逆时针旋转。 3D转换 9.2.3 9.2 变形 在CSS3中包含很多转换的属性，通过这些属性可以设置不同的转换效果。 属性名称 描述 transform 向元素应用 2D 或 3D 转换 transform-origin 允许改变被转换元素的位置 transform-style 规定被嵌套元素如何在 3D 空间中显示 perspective 规定 3D 元素的透视效果 perspective-origin 规定 3D 元素的底部位置 backface-visibility 定义元素在不面对屏幕时是否可见 3D转换 9.2.3 9.2 变形 CSS3中还包含很多转换的方法，运用这些方法可以实现不同的转换效果。 方法名称 描述 matrix3d(n,n,n,n,n,n,n,n,n,n,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 转换元素的透视视图 9.3 动画 CSS3提供了强大的过渡属性，它可以在不使用Flash动画或者JavaScript脚本的情况下，为元素从一种样式转变为另一种样式时添加效果，例如渐显、渐弱、动画快慢等。 @keyframes 9.3.1 9.3 动画 在CSS3中，@keyframes规则用于创建动画。 基本语法格式 @keyframes animationname { keyframes-selector{css-styles;} } animationname：表示当前动画的名称，它将作为引用时的唯一标识，因此不能为空。 keyframes-selector：关键帧选择器，即指定当前关键帧要应用到整个动画过程中的位置，值