HTML5+CSS3高级 变形 CSS3高级应用(2)—变形.pptx

HTML5网站设计基础项目十一 CSS3高级应用变形目录CONTENTS1认识transform变换22D——变换33D—变换平移旋转位置变换角度变换变形transform倾斜大小（方向）变化缩放形状变换11.2 CSS3——变形1、认识transform2012年9月，W3C组织发布了CSS3变形工作草案，这个草案包括了CSS3 2D变形和CSS3 3D变形。11.2 CSS3——变形1、认识transformCSS3的变形（transform）属性可以让元素在一个坐标系统中变形。语法：transform：none | transform-functions;默认值为none，适用于内联元素和块元素，表示不进行变形。transform-function用于设置变形函数，可以是一个或多个变形函数列表。 x指元素在水平方向上移动的距离，y指元素在垂直方向上移动的距离。当使用一个参数时表示X轴上移动的距离，x和y可以为负值，表示反方向移动元素。transform: translateX();transform: translateY();11.2 CSS3——变形2、2D转换——平移：translate()使用translate（）方法能够重新定义元素的坐标，实现平移的效果。语法：transform: translate(x,y);transform: scaleX();transform: scaleY();11.2 CSS3——变形2、2D转换——缩放：scale( ) scale() 方法用于缩放元素大小语法：transform: scale(x,y); 两个参数值，分别用来定义宽度和高度的缩放比例。x指元素宽度的缩放比例，y指元素高度的缩放比例。x和y的取值可以是大于1的正数、负数和小数。大于1正数表示放大，负数值不会缩小元素，而是翻转元素，然后再缩放元素。当使用一个参数时表示x和y的缩放比例相同。transform: skewX();transform:skewY();11.2 CSS3——变形2、2D转换——倾斜：skew() skew( )方法来实现图像或文字的倾斜显示。语法：transform: skew (x-angle,y-angle); x-angle表示相对于X轴进行倾斜角度值，y-angle表示相对于Y轴进行倾斜角度值，X轴逆时针转为正；Y轴顺时针转为正。skew( )斜切函数示意图，例如skew(30deg,20deg)，transform:rotate(45deg)transform:rotate(-45deg)11.2 CSS3——变形2、2D转换——旋转：rotate() rotate( )方法来实现图像或文字的旋转。语法：transform: rotate (angle);angle指定元素旋转角度值，正数值按照顺时针进行旋转，负值按照逆时针旋转。例如：11.2 CSS3——变形2、2D转换——更改变换中心点:transform-origin变形操作是以元素的中心点为基准进行的，使用transform-origin属性改可以变中心点。语法：transform-origin: x-axis y-axis z-axis;三个参数，其默认值分别为50% 50% 0参数描述x-axis定义视图被置于X轴的位置left/center/rightlength%y-axis定义视图被置于Y轴的何处。可能的值有：top/center/bottomlength%z-axis定义视图被置于Z轴的何处。可能的值有：length11.2 CSS3——变形2、3D转换x：代表横向坐标位移向量的长度。y：代表纵向坐标位移向量的长度。z：代表Z轴位移向量的长度。此值不能是一个百分比值，否则将会视为无效值。angle：角度值，主要用来指定元素在3D空间旋转的角度，如果其值为正，元素顺时针旋转，反之元素逆时针旋转。rotate3d(x,y,z,angle);谢谢 !