transform集合

贵哥的编程之路

发布于 2020-10-28 15:05:31

4680

发布于 2020-10-28 15:05:31

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<style type="text/css">
		*{padding: 0px;margin: 0px;}
		ul
		{
			width: 800px;
			height: 500px;
			border: 1px solid red;
			margin: 0px auto;
		}
		ul li
		{
			list-style: none;
			width: 100px;
			height: 50px;
			background-color: red;
			margin: 0px auto;
			text-align: center;
			line-height: 50px;
			margin-top: 50px;
		}
		ul li:nth-child(2)
		{
			 /*其中deg是单位, 代表多少度*/
			transform: rotate(45deg);
		}
		ul li:nth-child(3)
		{
			  /*
            第一个参数:水平方向
            第二个参数:垂直方向
            */
			transform: translate(100px,0px);
		}
		ul li:nth-child(4)
		{
			/*
            第一个参数:水平方向
            第二个参数:垂直方向
            注意点:
            如果取值是1, 代表不变
            如果取值大于1, 代表需要放大
            如果取值小于1, 代表需要缩小
            如果水平和垂直缩放都一样, 那么可以简写为一个参数
            */
			transform: scale(1.5);
		}
		 ul li:nth-child(5){
		 	 /*
            注意点:
            1.如果需要进行多个转换, 那么用空格隔开
            2.2D的转换模块会修改元素的坐标系, 所以旋转之后再平移就不是水平平移的
            */
		 	transform: rotate(45deg) translate(100px,0px) scale(1.5);
		 }
	</style>
</head>
<body>
	<ul>
    <li>正常的</li>
    <li>旋转的</li>
    <li>平移的</li>
    <li>缩放的</li>
    <li>综合的</li>
</ul>
</body>
</html>

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2020/09/18 ，如有侵权请联系 cloudcommunity@tencent.com 删除

transform