《网页设计与制作（HTML5+CSS3）立体化项目教程》 课件 23.2D变形

网页设计与制作（HTML5+CSS3）主讲教师：周礼萍0

1位移（translate)02缩放（scale）03旋转（rotate）04倾斜（skew）目录contents

2D转换转换（transform）可以理解为变形,它可以实现元素的位移、旋转、缩放等效果

2D转换PART1位移（translate）transform:translate(x,y);transform:translateX(n);transform:translateY(n);translate移动2D移动是2D转换里面的一种功能，可以改变元素在页面中的位置，类似于相对定位。1.语法

位移2.特点

定义2D转换中的移动，沿着X和Y轴移动元素translate最大的优点：移动后原位置保留，不会影响到其他元素translate中的百分比单位是相对于自身元素的如：translate：（50%，50%）；

对行内标签没有效果位移translate移动translate移动可以运用动画+平移制作简单的轮播图自动播放效果任务实践任务2奔跑的北极熊（1）创建站点文件夹，新建文件1002.html，将背景设置为黑色。（2）创建一个类名为shan的高600px的盒子，定位距离顶部300px。（3）盒子内插入三张图片，注意山从近到远（近处的山矮，远处的山高），用定位完成。（4）用位移+动画制作山从右往左移动，注意调用动画时，要考虑到远山移动速度较慢，近山移动相对较快，所以在设置动画完成时长时，远处的山移动时长应比近处的山完成时间更长。PART2缩放（scale）scale(缩放)transform：scale(x,y);缩放即放大和缩小，该属性可以设置元素的放大和缩小。1.语法

缩放参数xy用逗号隔开transform：scale(1,1);宽高是原来的1倍，无变化transform：scale(2,2);宽高是原来的2倍transform：scale(2);只有一个参数时，宽高同时放大2倍transform：scale(0.5,0.5);宽高缩小一半当参数为负值时，会进行翻转后再缩放transform：scaleX(-1);沿着X轴翻转后缩放transform：scaleY(-1);沿着Y轴翻转后缩放transform：scale(-1);沿着对角线翻转后缩放scale：默认中心点缩放，不影响其他的盒子位置缩放scale(缩放)案例：鼠标经过时放大相册.xiangceulli:hoverimg{transform:scale(2);

/*为原来的2倍*/position:relative;z-index:99;

/*提升层级*/border-color:#000;}scale(缩放)案例任务实践任务2烟花效果要求：模拟烟花效果，从开始没有到绽放再到消失的效果就可以用缩放+动画来实现。PART3旋转（rotate）2D旋转是指让元素在二维平面顺时针旋转或者逆时针旋转。1.语法

2.重点rotate里面度数单位为deg，如：rotate(45deg)

度数为正时，顺时针，反正为逆时针

默认旋转中心点是元素中心点

transform:rotate(度数);rotate(旋转)旋转案例：旋转尖角div{position:relative;width:300px;height:35px;border:1pxsolid#666;}

div::after{content:"";position:absolute;right:20px;top:10px;width:10px;height:10px;border-right:1pxsolid#000;border-bottom:1pxsolid#000;

transform:rotate(45deg);}旋转45度rotate(旋转)元素旋转时中心点可以设置1.语法

2.重点

参数xy用空格隔开xy默认中心点是元素的中心（50%50%）xy可以用百分比、像素或者方位名词（top、bottom、left、right、center)transform-origin:xy;rotate(旋转)任务实践任务3加载动画loading图制作（1）创建站点文件夹，新建文件1003.html。（2）两个div兄弟为50*50的盒子，里面分别装有4个15*15的P盒子。（3）P盒子背景颜色为蓝色，定义动画先隐藏-显示-隐藏（缩放效果制作），依次设置每一个相邻的P标签延时动画时间。（4）将第二个div盒子旋转45°。transform-origin:xy;设置转换中心点属性元素旋转时，默认中心点的位置是元素的中心，也可以通过transform-origin属性改变中心点的位置，其语法格式：参数xy用空格隔开。xy默认中心点是元素的中心（50%50%）。xy可以用百分比、像素或者方位名词（top、bottom、left、right、center）。若只写一个值，另一个默认为center，居中。设置转换中心点属性任务实践任务4垃圾分类推广动画（1）创建站点文件夹，放入素材，新建文件1004.html，将背景设为绿色。（2）当人物点击A不可回收时，走近红色垃圾桶（下方）时，显示错误标志。（3）当人物点击B可回收时，走近蓝色垃圾桶（上方）时，桶盖旋转打开，并显示正确标志。（4）注意人物移动时，近大远小（远处人物会变小）。PART4倾斜（skew）skew(

)定义了一个元素在二维平面上的倾斜转换。语法格式：参数中的x，y分别代表x轴和y轴倾斜的角度（单位deg）。值可以为正，也可以为负。如果只写一个参数，则另一个默认为0。也可以分开书写，沿着X轴或Y轴进行倾斜。transform:skew(X,Y);倾斜（skew）倾斜transform:skewX(20deg);transform:skewX(45deg);transform:skewX(-45deg);倾斜（skew）transform:skewY(20deg);transform:skewY(45deg);transform:skewY(-45deg);倾斜（skew）

2D转换综合写法注意：同时使用多个转换，格式为：transform:translate()rotate()scale()skew()...等书写顺序会影响转换的效果（先旋转会改变坐标轴方向）当我们同时有位移和其他属性时，要将位移属性放到最前面总结转换transform可以理解为变形，有2D和3D之分;2D移动translate（x,y）移动后保留原位置，不影响其他盒子的布局，参数用%，是相对于自身宽度和高度来计算;也可以分开设置transform:translateX(x