Web前端开发基础创新实践教程课件：设计制作2D和3D变换响应效果.pptxVIP

Designandproduce2Dand3Dtransformationresponseeffects设计制作2D和3D变换响应效果前端开发技术基础FundamentalsofWebFrontendTechnology

web前端技术基础1D转换方法transfrom属性可用于控制对象在二维平面上的转换，可以实现位移、旋转和缩放等动态变化效果，它是CSS3中的重要属性，其值是关于位移、旋转、缩放的几个方法函数。函数描述matrix(n,n,n,n,n,n)定义2D转换，使用六个值的矩阵。translate(x,y)定义2D转换，沿着X和Y轴移动元素。translateX(n)定义2D转换，沿着X轴移动元素。translateY(n)定义2D转换，沿着Y轴移动元素。scale(x,y)定义2D缩放转换，改变元素的宽度和高度。scaleX(n)定义2D缩放转换，改变元素的宽度。scaleY(n)定义2D缩放转换，改变元素的高度。rotate(angle)定义2D旋转，在参数中规定角度。skew(x-angle,y-angle)定义2D倾斜转换，沿着X和Y轴。skewX(angle)定义2D倾斜转换，沿着X轴。skewY(angle)定义2D倾斜转换，沿着Y轴。

web前端技术基础示例divid=big!--盒子1--divclass=boxdivclass=imgimgsrc=./image/qp.jpgalt=height=/divdivclass=txth2高贵典雅旗袍彰显中华底蕴/h2/div/div!--盒子2--divclass=boxdivclass=imgimgsrc=./image/3panwnog.jpgalt=/divdivclass=txth2穿越险峻沟壑忽现最美绿洲/h2/div/div/div

web前端技术基础示例style #big{ width:900px; margin:100pxauto; } .box{ float:left; width:400px; height:600px; margin-right:10px; border:1pxsolid#767676; border-radius:6px; transition:all1s; } /*hover之后位置上移动*/ .box:hover{ box-shadow:3px3px3px3pxrgba(0,0,0,.6); transform:translate(0,-5%); } .imgimg{ width:400px; } /*图片hover之后放大1.3倍*/ .box:hover.imgimg{ transition:all1s; transform:scale(1.3); } .img{ overflow:hidden; } .txt{ text-align:center; }/style

web前端技术基础1.3D转换方法维变换是包含在X轴、Y轴和Z轴上的变化，其参数主要包括：3D位移、3D旋转、3D缩放、3D矩阵多个功能函数函数描述matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n)定义3D转换，使用16个值的4x4矩阵。translate3d(x,y,z)定义3D转化。translateX(x)定义3D转化，仅使用用于X轴的值。translateY(y)定义3D转化，仅使用用于Y轴的值。translateZ(z)定义3D转化，仅使用用于Z轴的值。scale3d(x,y,z)定义3D缩放转换。scaleX(x)定义3D缩放转换，通过给定一个X轴的值。scaleY(y)定义3D缩放转换，通过给定一个Y轴的值。scaleZ(z)定义3D缩放转换，通过给定一个Z轴的值。rotate3d(x,y,z,angle)定义3D旋转。rotateX(angle)定义沿X轴的3D旋转。rotateY(angle)定义沿Y轴的3D旋转