2D变换属性transform

最新推荐文章于 2024-06-19 09:58:25 发布

流灬

最新推荐文章于 2024-06-19 09:58:25 发布

阅读量681

点赞数

本文链接：https://blog.youkuaiyun.com/qq_41625074/article/details/104646438

版权

2D变换属性transform可以实现许多的2D效果，其功能函数有下列四个：

1.位移translate()

2.缩放scale()

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			div{
				width: 500px;
				height: 500px;
				border:1px solid red;
				overflow: hidden;
				margin: 0 auto;
			}
			img{
				display: block;
				width: 500px;
				height: 500px;
				transition: 2s;
			}
			img:hover {
				transform: scale(2);
			}
		</style>
	</head>
	<body>
		<div>
			<img src="../3.2陈丽红/banner.jpg" alt="">
		</div>
	</body>
</html>
v

初始图和效果图分别如下：

3.选择rotate()

案例如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			*{
				margin: 0;
				padding: 0;
			}
			li{
				list-style: none;
			}
			.box{
				width: 780px;
				height: 600px;
				border-bottom: 1px solid black;
				margin: 0 auto;
				position: relative;
			}
			li{
				width: 60px;
				height: 250px;
				position: absolute;
				left:50%;
				margin-left: -30px;
				bottom: 50px;
				transition: 1s;
				transform-origin: center 250px;
			}
			.list2,.list4,.list6,.list8{
				background: palevioletred;
			}
			.list3,.list7,.list11,.list13,.list9{
				background:tomato;
			}
			.list1,.list5,.list8,.list12,.list10{
				background:greenyellow;
			}
			.box:hover .list1{
				transform: rotate(-15deg);
			}
			.box:hover .list2{
				transform: rotate(-30deg);
			}
			.box:hover .list3{
				transform: rotate(-45deg);
			}
			.box:hover .list4{
				transform: rotate(-60deg);
			}
			.box:hover .list5{
				transform: rotate(-75deg);
			}
			.box:hover .list6{
				transform: rotate(-90deg);
			}
			.box:hover .list7{
				transform: rotate(0deg);
			}
			.box:hover .list8{
				transform: rotate(15deg);
			}
			.box:hover .list9{
				transform: rotate(30deg);
			}
			.box:hover .list10{
				transform: rotate(45deg);
			}
			.box:hover .list11{
				transform: rotate(60deg);
			}
			.box:hover .list12{
				transform: rotate(75deg);
			}
			.box:hover .list13{
				transform: rotate(90deg);
			}
		</style>
	</head>
	<body>
		<div class="box">
			<ul>
				<li class="list1">1</li>
				<li class="list2">2</li>
				<li class="list3">3</li>
				<li class="list4">4</li>
				<li class="list5">5</li>
				<li class="list6">6</li>
				<li class="list7">7</li>
				<li class="list8">8</li>
				<li class="list9">9</li>
				<li class="list10">10</li>
				<li class="list11">11</li>
				<li class="list12">12</li>
				<li class="list13">13</li>
			</ul>
		</div>
	</body>
</html>

初始图和效果图：

4.倾斜skew()

案例如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
		li{
			list-style: none;
		}
		ul,li{
			margin: 0;
			padding: 0;
		}
		a{
			text-decoration: none;
		}
		ul{
			width: 508px;
			height: 100px;
			margin: 0 auto;
			border: 1px solid red;
			overflow: hidden;
		}
		li{
			float: left;
			font-size: 20px;
			font-family: "微软雅黑";
			line-height: 100px;
			background: orange;
			width: 100px;
			text-align: center;
			border-left: 2px solid #fff;
			transform: skewX(-30deg);
			
		}
		a{
			display: block;
			color: blue;
			transform: skewX(30deg);
		}
		.list1{
			border-left:none;
			padding-left: 30px;
			margin-left: -30px;
		}
		.list5{
			padding-right: 30px;
			margin-right: -30px;
		}
		a:hover{
			color:#fff;
		}
		</style>
	</head>
	<body>
			<ul>
				<li class="list1"><a href="">111</a></li>
				<li><a href="">222</a></li>
				<li><a href="">333</a></li>
				<li><a href="">444</a></li>
				<li class="list5"><a href="">555</a></li>
			</ul>
	</body>
</html>

效果图如下：