CSS transform变换（一）

最新推荐文章于 2024-10-02 13:25:04 发布

河北颜良

最新推荐文章于 2024-10-02 13:25:04 发布

阅读量226

点赞数

文章标签： css css3 html html5

本文链接：https://blog.csdn.net/zhe06/article/details/105980557

版权

1.transiate(x,y) 设置盒子位移

<!DOCTYPE html>
<html">
<head> 
	<meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        /*设置原始元素样式*/
        #div1{
            width:200px;
            height:100px;
            background-color: #C5C5C5;
        }
        /*设置当前元素样式*/
        #div2{
            width:200px;
            height:100px;
            color:white;
            background-color: #3EDFF4;
            text-align:center;
            transform:translateY(40px);   //transiateX(),transiateY()
        }
        #div3{
            width:200px;
            height:100px;
            color:white;
            background-color: #00FF00;
            text-align:center;
            transform:translate(20px,50px);     //transiate(x,y)
        }
    </style>
</head>
<body>
    <div id="div1">
        <div id="div2">我沿y轴向下移动40px</div>
        <div id="div3">不解释自己看</div>
    </div>
</body>
</html>

2.scale(x,y) 设置盒子缩放
其中x,y 是指x,y轴与原来图像的比例。 -无穷 < x/y<+无穷
（0 < x/y <∞）（-∞ < x/y < 0 取值，会让我们现在图像为原来图像的镜像反转）

<!DOCTYPE html>
<html">
<head> 
	<meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        /*设置原始元素样式*/
        #div1{
            width:200px;
            height:100px;
            background-color: #C5C5C5;
        }
        /*设置当前元素样式*/
        #div2{
            width:200px;
            height:100px;
            color:white;
            background-color: #3EDFF4;
            text-align:center;
            transform:scale(0.8,0.8);
        }
    </style>
</head>
<body>
    <div id="div1">
        <div id="div2"></div>
    </div>
</body>
</html>

3.rotate(deg) 设置盒子旋转

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style> 
div{
	margin:30px;
	width:200px;
	height:100px;
	background-color:yellow;
	transform:rotate(9deg);   // 9是度数，
	}
</style>
</head>
<body>
<div></div>
</body>
</html>

4.skew(x-angle,y-angle) 设置盒子斜切

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			div{
            width: 200px;
            height: 200px;
            transition:all 2s;
            margin: 150px auto;
        	}
		.div1{
       	 background-color: #f00;
    	}
	.div2{
        background-color: #0f0;
  	  }
    .div1:hover {
            transform:skew(0,30deg);
            transform-origin: left top;
        }
       .div2:hover {
            transform:skew(30deg,0);
            transform-origin: left top;

        }
		</style>
	</head>
	<body>
		<div class="div1"></div>
    <div class="div2"></div>
	</body>
</html>