CSS 2D转换模块总结

transform: rotate(45deg);/*旋转模块,其中deg是单位, 代表多少度*/



transform: translate(100px, 0px);/*平移模块,第一个参数:水平方向,第二个参数:垂直方向*/




transform: scale(0.5, 0.5)  /*缩放模块,第一个参数:水平方向
            第二个参数:垂直方向
            注意点:
            如果取值是1, 代表不变
            如果取值大于1, 代表需要放大
            如果取值小于1, 代表需要缩小
            如果水平和垂直缩放都一样, 那么可以简写为一个参数*/



transform: rotate(45deg) translate(100px, 0px) scale(1.5, 1.5);/*连写*/



 /*
            1.什么是透视
            近大远小
            2.注意点
            一定要注意, 透视属性必须添加到需要呈现近大远小效果的元素的父元素上面
 */
      写法:      perspective: 500px;



旋转轴向:
/*默认情况下所有元素都是围绕Z轴进行旋转,想围绕哪个轴旋转, 那么只需要在rotate后面加上哪个轴即可*/
            transform: rotateZ(45deg);
            transform: rotateX(45deg);


/*除此之外,平移也可以选择轴向,写法跟旋转一样,只写一个参数*/


猜你喜欢

转载自blog.csdn.net/mengxianglong123/article/details/84259917