您的位置：首页 > Web前端 > CSS

CSS3—2D转换transform属性的主要方法

2020-06-06 05:20 591 查看

一、2D转换能做什么？
通过转换（transform），能对元素进行移动、缩放、转动、拉伸。
也就是改变元素的形状、尺寸和位置。
二、2D转换方法

  1. 水平和垂直移动translate（x,y），水平移动translateX(n)，垂直移动translateY(n),
    通过translate()方法，可以根据给定的left和top位置，相对移动当前元素。

    例如：translate(50px,100px)，将元素向右移动50px，向下移动100px

<style>
*{margin: 0;padding: 0;}
.box{
width: 400px;
height: 400px;
background-color: yellowgreen;
position: relative;
}
.box1{
width: 100px;
height: 100px;
background: yellow;
position: absolute;
left: 50px;
/* 根据给定的left和top位置，相对移动当前元素（向右50px,向下100px）。*/
transform: translate(50px,100px);
-ms-transform: translate(50px,100px);		/* IE 9 */
-webkit-transform: translate(50px,100px);	/* Safari and Chrome */
-o-transform: translate(50px,100px);		/* Opera */
-moz-transform: translate(50px,100px);		/* Firefox */
}
</style>
<body>
<div class="box">box
<div class="box1">box1</div>
</div>
</body>

  1. 旋转rotate（angle）
    通过rotate（）方法将元素顺时针（正度数）或逆时针（负度数）旋转给定度数
    例如：当鼠标移入元素时，通过rotate（）方法将该元素顺时针旋转180°
<style>
.box{
width: 100px;
height: 50px;
background-color: yellowgreen;

}
/* 当鼠标移入box元素时顺时针旋转180° */
.box:hover{
transform: rotate(180deg);
-ms-transform: rotate(180deg);		/* IE 9 */
-webkit-transform: rotate(180deg);	/* Safari and Chrome */
-o-transform: rotate(180deg);		/* Opera */
-moz-transform: rotate(180deg);		/* Firefox */
}
</style>
<body>
<div class="box">rotate()方法旋转元素</div>
</body>


  1. 缩放scale（x,y），宽度缩放scaleX(n)，高度缩放scaleY(n)
    通过scale（）方法，可以将元素的宽度或高度扩大或缩小到原来的倍数
    例如： transform: scale(2,3)当鼠标移入时宽度width扩大为原来的2倍，高度height扩大为原来的3倍
<style>
.box{
margin: 100px;
width: 100px;
height: 50px;
background-color: yellowgreen;

}
/* 当鼠标移入box元素时宽度width扩大为原来的2倍，高度height扩大为原来的3倍 */
.box:hover{
transform: scale(2,3);
-ms-transform: scale(2,3);	/* IE 9 */
-webkit-transform: scale(2,3);	/* Safari 和 Chrome */
-o-transform: scale(2,3);	/* Opera */
-moz-transform: scale(2,3);	/* Firefox */
}
</style>
<body>
<div class="box">rotate()方法旋转元素</div>
</body>


  1. 翻转skew(x-angle,y-angle)，绕X轴翻转skewX(angle)，绕Y轴翻转skewY(angle)
    通过 skew() 方法，元素翻转给定的角度，根据给定的水平线（X 轴）和垂直线（Y 轴）参数
    例如： transform: skew(10deg,20deg);将元素围绕X轴翻转10°，围绕Y轴选择20°
<style>
.box{
margin: 100px;
width: 100px;
height: 50px;
background-color: yellowgreen;
transform: skew(10deg,20deg);
-ms-transform: skew(10deg,20deg);	/* IE 9 */
-webkit-transform: skew(10deg,20deg);	/* Safari and Chrome */
-o-transform: skew(10deg,20deg);	/* Opera */
-moz-transform: skew(10deg,20deg);	/* Firefox */
}
</style>
<body>
<div class="box" >skew()方法翻转元素</div>
</body>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航