课程主题 了解 CSS3-网页设计客户端技术 课程-1728971728843.pptx

网页设计客户端技术课程现代殡葬技术与管理专业群教学资源库主讲人：严志课程主题：了解CSS3

任务三了解CSS3CSS32D转换01

了解CSS3三CSS32D转换01通过CSS3的换，我们能够对标签进行移动、缩放、转动、拉长或拉伸。2D转换的主要方法有：translate()，移动标签；rotate()，标签旋转给定的角度；scale()，标签的尺寸会增加或减少；skew()，标签翻转给定的角度；matrix()，把所有2D转换方法组合在一起。（1）CSS32D转换概述

了解CSS3三CSS32D转换01（2）CSS3特效案例!DOCTYPEhtmlhtmlheadmetahttp-equiv=Content-Typecontent=text/html;charset=utf-8/title例3_3使用CSS3的2D转换示例：移动、旋转、增加、翻转层元素/titlestylediv{ width:100px; height:75px; background-color:yellow; border:1pxsolidblack;}例5-9使用CSS3的2D转换示例：移动、旋转、增加、翻转层标签

了解CSS3三CSS32D转换01（2）CSS3特效案例div#div2{ transform:translate(50px,50px); -ms-transform:translate(50px,50px);/*IE9*/ -moz-transform:translate(50px,50px);/*Firefox*/ -webkit-transform:translate(50px,50px);/*SafariandChrome*/ -o-transform:translate(50px,50px);/*Opera*/}#div3{ /*rotate旋转*/ margin:0px200px; width:200px; height:100px; background-color:yellow; /*Rotatediv*/ transform:rotate(9deg); -ms-transform:rotate(9deg);/*InternetExplorer*/ -moz-transform:rotate(9deg);/*Firefox*/ -webkit-transform:rotate(9deg);/*Safari和Chrome*/ -o-transform:rotate(9deg);/*Opera*/}例5-9使用CSS3的2D转换示例：移动、旋转、增加、翻转层标签

了解CSS3三CSS32D转换02（2）CSS3特效案例div#div4{ margin:120px; transform:scale(2,4); -ms-transform:scale(2,4);/*IE9*/ -moz-transform:scale(2,4);/*Firefox*/ -webkit-transform:scale(2,4);/*SafariandChrome*/ -o-transform:scale(2,4);/*Opera*/}div#div5{ margin:-100px300px; transform:skew(30deg,20deg); -ms-transform:skew(30deg,20deg);/*IE9*/ -moz-transform:skew(30deg,20deg);/*Firefox*/ -webkit-transform:skew(30deg,20deg);/*SafariandChrome*/ -o-transform:skew(30deg,20deg);/*Opera*/}/style/head例5-9使用CSS3的2D转换示例：移动、旋转、增加、翻转层标签

了解CSS3三CSS32D转换01（2）CSS3特效案例bodydiv你好。这是一个div元素。/divdivid=div2你好。这是一个div元素移动示例。/divdivid=div3你好。这是一个div元素旋转示例。/divdivid=div4你好。这是一个div元素增加示例。/divdivid=div5你好。这是一个div元素翻转示例。/div/body/html例5-9使用CSS3的2D转换示例：移动、旋转、增加、翻转层标签

了解CSS3三