网页设计与制作（HTML+CSS+JS）-3期（KC003） CSS3变形 2CSS3转换.pptxVIP

1CSS3转换Part◎ transform转换简介◎ 常用的transform变形方法◎ 运用3D变形transform简介Transform简介Transform Transform顾名思义，就是变形的意思。在CSS3中，我么可以利用transform功能来实现文字或图像的 旋转、缩放、倾斜、移动 等变形处理。Transform简介 语法：transform：none | transform-function；transform属性的默认值为none，适用于内联元素和块元素，表示不进行变形。transform-function用于设置变形函数，可以是一个或多个变形函数列表。兼容性：IE10、Firefox、Opera 支持 transition 属性。Chrome 和Safari 需要前缀 -webkit-，IE 9 需要前缀 -ms-。Transform简介transform-function常用函数及含义函数名称含义translate( )移动元素对象，即基于X和Y坐标重新定位元素。scale( )缩放元素对象，可以使任意元素对象尺寸发生变化，取值包括正数、负数和小数。rotate( )旋转元素对象，取值为一个度数值。skew( )倾斜元素对象，取值为一个度数值。matrix( )定义矩形变换，即基于X和Y坐标重新定位元素的位置。移动方法translate()移动方法translate（）translate位 移移动方法translate（）translate语法： transform: translate(x,y) ； 语法中，x指元素在水平方向上移动的距离，y指元素在垂直方向上移动的距离。，x和y可以为负值，表示反方向移动元素。移动方法translate（）X,Y均为正值时，则元素向右侧，向下方移动移动方法translate（）举例演示translate移动变形的使用。运用translate移动后的页面效果初始div元素的状态移动方法translate（）Y 轴transform: translate(-160px , -80px) 80px移动后的位置原先的位置-160pxX 轴X,Y均为负值时，则元素向左侧，向上方移动移动方法translate（） 无论是何种变形方式，在其表现时通常都需要一个触发条件，而这个条件大多是 鼠标经过 。移动方法translate（）结论X为正则向右移动，X为负则向左移动。Y为正则向下移动，Y为负则向上移动。移动方法translate（）translate语法： transform: translate( x , y ) ；X和Y除了设置像素值，还可以设置百分比例如： transform: translate( 50% , 50% ) 移动方法translate（）transform: translate( 50% , 50% ) X 的值为50%意味着元素向右移动的距离为该元素宽的50%Y 的值为50%意味着元素向下移动的距离为该元素高的50%移动方法translate（）transform: translate(75% , 50%) Y 轴150pxX 轴元素宽200px高100px-50px移动后的位置X,Y均为正值时，则元素向右侧，向下方移动移动方法translate（）transform: translate (50px) 元素沿X轴向右移动50pxtransform: translateX (50px)元素沿Y轴向下移动50pxtransform: translateY (50px) transform: translate (0px，50px)移动方法translate（）transform: translate( 50px , 50px ) 不能简写成transform: translate( 50px) transform: translate( 50px) 其意思是元素仅沿着X轴向右移动50px缩放方法scale()缩放方法scale（）scale缩 放缩放方法scale（）scale语法： transform: scale(x,y) ； Scale缩放X 指元素宽度的缩放比例，Y 指元素高度的缩放比例。X 和 Y 的取值可以是大于1的正数、负数和小数。大于1的正数表示放大，小数则表示缩小元素。缩放方法scale（）负数值不会缩小元素，而是翻转元素，然后再缩放元素。scale的放大或缩小的默认对其点是其元素的中心点。缩放方法scale（）举例演示scale缩放变形的使用。缩放方法scale（） 为了保证图像或元素的显示效果不失真，我们通常会将Scale中的 X 值和 Y 值设置为同一个值。div:hover { -webkit-transform:sc