济宁手机网站开发公司,网站指向ip列表是什么,北京餐饮培训网站建设,看房子的网站2D变换#xff1a;transform
1.1 位移#xff1a; translate translate#xff1a;一个值代表水平方向#xff0c;两个值代表:水平和垂直方向。translateX#xff1a;设置水平方向位移#xff0c;需指定长度值;若指定的是百分比#xff0c;是参考自身宽度的百分比。tra…2D变换transform
1.1 位移 translate translate一个值代表水平方向两个值代表:水平和垂直方向。translateX设置水平方向位移需指定长度值;若指定的是百分比是参考自身宽度的百分比。translateY设置垂直方向位移需指定长度值;若指定的是百分比是参考自身高度的百分比。注意 位移与相对定位很相似都不脱离文档流不会影响到其它元素。与相对定位的区别:相对定位的百分比值参考的是其父元素;位移的百分比值参考的是其自身。浏览器针对位移有优化与定位相比浏览器处理位移的效率更高。transform可以链式编写transform: translateX(38px) translateY ( 40px);位移对行内元素无效。位移配合定位可实现元素水平垂直居中
.box {position: absolute;left : 50%;top: 58%;transform: translate( -50%-58%);
)
1.2 缩放 scale同时设置水平方向、垂直方向的缩放比例一个值代表同时设置水平和垂直缩放;两个值分别代表:水平缩放、垂直缩放。scaleX设置水平方向的缩放比例值为一个数字1表示不缩放大于1放大小于1缩小。scalaY设置垂直方向的缩放比例值为一个数字1表示不缩放大于1放大小于1缩小。注意 scale的值,是支持写负数的,但几乎不用因为容易让人产生误解。不能操作行内元素。借助缩放,可实现小于12px的文字。
1.3 旋转rotate rotate设置旋转角度需指定一个角度值( deg )正值顺时针负值逆时针。rotate一个值的时候相当于roateZ旋转会改变坐标系的轴(随旋转角度变化)
1.4 扭曲skew skew一个值代表skewX两个值分别代表:skewX.skewYskewX设置元素在水平方向扭曲值为角度值会将元素的左上角、右下角拉扯。skewY设置元素在垂直方向扭曲值为角度值会将元素的左上角、右下角拉扯。
1.5 变换原点 transform-origin属性 transform-origin: 50% 50%变换原点在元素的中心位置百分比是相对于自身。--默认值transform-origin : left top变换原点在元素的左上角。transform-origin: 50px 50px变换原点距离元素左上角50px 50px的位置。transform-origin : 0只写一个值的时候第二个值默认为50%。注意 修改变换原点对位移没有影响对旋转和缩放会产生影响。如果提供两个值,第一个用于横坐标第二个用于纵坐标。如果只提供一个若是像素值表示横坐标纵坐标取50%;若是关键词则另一个坐标取50%
1.6 多重变换 多重变换时最好先位移最后旋转
3D变换
元素进行3D变换的首要操作:父元素必须开启3D空间与景深
空间transform-style flat : 让子元素位于此元素的二维平面内(默认值)preserve-3d:让子元素位于此元素的三维空间内(3D空间)
景深perspective 属性 none :不指定透视――(默认值)长度值︰指定观察者与“z0”平面的距离,不允许负值。
透视点位置perspective-origin 属性 透视点位置就是观察者的位置;默认的透视点在元素的中心。在父元素中设置观察者位置通常情况下我们不需要调整透视点位置。perspective-origin : 488px 308px 相对坐标轴往右偏移488px往下偏移308px
位移 3D位移是在2D位移的基础上可以让元素沿z轴位移transform属性 translateZ设置z轴位移需指定长度值正值向屏幕外负值向屏幕里且不能写百分比。translate3d第1个参数对应x轴第2个参数对应y轴第3个参数对应z轴且均不能省略。
旋转改变坐标系 3D旋转是在2D旋转的基础上可以让元素沿x轴和y轴旋转transform属性 rotateX设置X轴旋转角度需指定一个角度值( deg )面对x轴正方向:正值顺时针负值逆时针。rotateY设置y轴旋转角度需指定一个角度值( deg )面对y轴正方向:正值顺时针负值逆时针。rotate3d前3个参数分别表示坐标轴: ×,y ,z第4个参数表示旋转的角度参数不允许省略。例如: transform: rotate3d(1,1,1,30deg)意思是: ×.y、z分别旋转30度。
缩放 3D缩放是在2D缩放的基础上可以让元素沿z轴缩放具体使用方式如下:transform属性 scaleZ设置z轴方向的缩放比例值为一个数字1表示不缩放大于1放大小于1缩小。scale3d第1个参数对应x轴第2个参数对应y轴第3个参数对应z轴参数不允许省略。
多重变换 多重变换时建议最后旋转transform : translatez( 188px) scalez(3) rotateY ( 48deg)
背部可见性 旋转到背部时可以看到正面的镜像使用 backface-visibility: hidden; 设置背部不可见。
