impress 2019-12-13
css3 2d,3d转换
1.2d转换
transform rotate
div{transform:rotate(30deg);} 顺时针旋转30度,负值为逆时针
transform translate
div{transform:translate(50px,100px)} 从当前位置移动到xy,x为左,y为上
transform scale
{transform:scale(2,3);} 增加宽度和高度,分别2倍,3倍
transform skew
{transform:skew(30deg,20deg);} 在x轴和y轴分别倾斜度数,元素在X轴和Y轴上倾斜20度30度,注意,前面是y轴。
transform matrix(a,b,c,d,e,f)
{transform:matrix(0.866,0.5,-0.5,0.866,0,0);} 6个参数,分别是旋转,缩放,移动和倾斜。利用matrix()方法旋转div元素30°
平移只有跟e和f有关系,跟其他a,b,c,d没有关系,它们该怎么样还是怎么样,e对应x轴的平移,f对应y轴的平移,往正方向平移多少单位就加上多少单位,反之则减去多少个单位。
缩放只有跟a和d有关系,跟其他数值都无关,a对应x轴缩放,d对应y轴缩放,缩放多少倍就乘以多少
transform:matrix(cosθ,sinθ,-sinθ,cosθ,0,0);然后需要旋转多少度就计算出这个度数的cosθ,sinθ就可以达到我们想要的效果
/*垂直居中,div上边界距离窗口上边的距离为窗口高度的50%,并针对不同浏览器进行兼容。-- 在外层添加一个div,把行内容居中,添加.row .justify-content-center -->