武汉纺织大学传媒学院 cm.wtu.edu.cn

Presentation on theme: "武汉纺织大学传媒学院 cm.wtu.edu.cn"— Presentation transcript:

1 武汉纺织大学传媒学院 cm.wtu.edu.cn
第24节 CSS3转换 武汉纺织大学传媒学院 cm.wtu.edu.cn 2018/11/18 传媒学院

2 1.转换属性 转换是css3引入的一个属性 通过 CSS3 转换，能够对元素进行移动、缩放、转动、拉长或拉伸 支持浏览器 transform
转换是使元素改变形状、尺寸和位置的一种效果 可以使用 2D 或 3D 转换来转换网页中的元素 支持浏览器 Internet Explorer 10、Firefox支持 transform 属性 Chrome 和 Safari 需要前缀-webkit- 2018/11/18 传媒学院

3 2.转换方法 转换方法 使用语法 translate() 移动 rotate() 旋转 scale() 缩放 skew() 翻转
rotateX() 3D旋转 rotateY() 3D旋转 使用语法 transform: rotate(30deg); 2018/11/18 传媒学院

4 3.translate 通过 translate() 方法，元素从其当前位置移动到给定的 left（x 坐标） 和 top（y 坐标） 位置
例子 transform: translate(50px,100px); -webkit-transform: translate(50px,100px); 表示移动到x坐标50px，y坐标100px的位置 2018/11/18 传媒学院

5 使用transform的 translate()方法后
必须手写，至少DW3中 2018/11/18 传媒学院

6 4.rotate 通过 rotate() 方法，元素顺时针旋转给定的角度。允许负值，元素将逆时针旋转 例子
transform: rotate(30deg); -webkit-transform: rotate(30deg); 顺时针旋转30度 2018/11/18 传媒学院

7 有一张图片刚好被一个div（红框蓝底）包含，给图片添加转换的旋转30度方法后，效果如下左
超出浏览器的范围的不会显示，超出父标签的范围默认会显示，如果不希望显示，可以设置父标签的定位-溢出-隐藏，如上右 2018/11/18 传媒学院

8 5.scale 通过 scale() 方法，元素的尺寸会增加或减少到给定的宽度（X 轴）和高度（Y 轴）参数 例子
transform: scale(2,4); -webkit-transform: scale(2,4); 第一个参数表示宽度，放大到2倍，第二个参数是高度，放大到4倍 transform: scale(2); 如果只有一个参数，则表示高度等比例变化 2018/11/18 传媒学院

9 有一张图片刚好被一个div（红框蓝底）包含，给图片添加转换的缩放1.1倍方法后，效果如下左
超出浏览器的范围的不会显示，超出父标签的范围默认会显示，如果不希望显示，可以设置父标签的定位-溢出-隐藏，如上右 2018/11/18 传媒学院

10 转换的缩放（scale）方法和修改宽度高度的效果不一样
改元素的宽高，是元素的左上角固定的缩放 2018/11/18 传媒学院

11 练习：图片放大特效 当鼠标移到图片上时，图片变大，移开又变回原理的尺寸 方法 操作步骤 通过hover伪样式添加转换的缩放方法
1.放置一个div刚好包含一个图片 Div设置大小，设置定位-溢出-隐藏 这是为了让图片放大时不会超出div 2018/11/18 传媒学院

12 2.设置img标签的hover伪样式 提示：转换属性代码要手工输入，可以先通过dw随便产生一个hover伪样式的规则，这样dw会自动产生样式代码，然后再在样式代码处手写转换属性代码 transform: scale(2); -webkit-transform: scale(2); 表示宽度放大到2倍，高度自动等比例变化 2018/11/18 传媒学院

13 6.skew 通过 skew() 方法，根据给定的水平线（X 轴）和垂直线（Y 轴）参数，元素翻转给定的角度 例子
transform: skew(30deg,20deg); -webkit-transform: skew(30deg,20deg); 围绕 X 轴把元素翻转 30 度，围绕 Y 轴翻转 20 度 2018/11/18 传媒学院

14 2018/11/18 传媒学院

15 7.rotateX 通过 rotateX() 方法，元素围绕其 X 轴以给定的度数进行旋转 例子
transform: rotateX(120deg); -webkit-transform: rotateX(120deg); 围绕X轴旋转120度 2018/11/18 传媒学院

16 鼠标移到图片上，旋转180度，立马完成，下一节会讲让旋转变慢点
2018/11/18 传媒学院

17 8.rotateY 通过 rotateY() 方法，元素围绕其 Y 轴以给定的度数进行旋转 例子
transform: rotateY(130deg); -webkit-transform: rotateY(130deg); 围绕Y轴旋转130度 2018/11/18 传媒学院

18 作业 图片放大特效（当鼠标移到图片上时，图片变大，移开又回到原理的尺寸）；图片3D旋转特效（当鼠标移到图片上时，按Y轴旋转180度，移开又回到原来的显示方式） 两张图片对应两个效果，要求两张图片并排显示，且有10px间隔 2018/11/18 传媒学院