CSS 2D 转换变形的移动的效果

05.29 20:11:57发布

CSS 2D 转换可以实现,位移、旋转、缩放等效果


移动: translate

旋转: rotate

缩放: scale

二维坐标系


2D转换是改变标签在二维平面上的位置和形状的一种技术,先来学习二维坐标系



(1)变形的移动的效果


div {

    width: 300px;

    height: 300px;

    background-color: pink;transform: translateX(100px);

    transform: translate(100px, 100px);

}


/*transform: translate(x, y);*/

/*写法一*/

transform: translate(10px, 0);


/*写法二*/

transform: translateX(100px);


/*写法三*/

transform: translateY(100px);



重点

1. 定义2D转换中的移动,沿着X和Y轴移动元素

2. translate最大的优点∶不会影响到其他元素的位置

3. translate中的百分比单位是相对于自身元素的translate:(50%,50%)

4. 对行内标签没有效果

TAG标签: css

登录 后发表评论
0条评论
还没有人评论过~