用css做常用的平移，缩放特效

先布局css
平移css代码

.wrapper{
				width: 600px;
				height: 400px;
				border: 1px solid;
				margin: 0 auto;
				position: relative;
				overflow: hidden; 
			}
			.wrapper p:nth-of-type(2){
				position: absolute;
				top: 50%;
				left: -100px;
			}
			.wrapper p:nth-of-type(3){
				width: 100px;
				height: 100px;
				border: 2px solid red;
				position: absolute;
				top:-200px;
				left:30%;
			}
			
			
			.wrapper:hover  p:nth-of-type(1){
				transform: translateY(-200px);
			}
			.wrapper:hover  p:nth-of-type(2){
				transform: translateX(300px);
			}
			.wrapper:hover  p:nth-of-type(3){
				transform: translateY(400px) rotate(360deg);
			}.wrapper img,.wrapper p{
				transition: all 2s;
			}
			.wrapper:hover img{
				transform: translateX(-40px);
				opacity: 0.5;
			}

缩放特效css代码

.wrapper {
				width: 600px;
				height: 400px;
				border: 1px solid;
				margin: 0 auto;
				position: relative;
				overflow: hidden;
			}
			.wrapper p{
				position: absolute;
				top: 0;
				bottom: 0;
				left: 0;
				right: 0;
				margin: auto;
			}

			.wrapper p:nth-of-type(1) {
				width: 300px;
				height: 200px;
				border-top: 1px solid white;
				border-bottom: 1px solid white;
				transform: scaleX(0);
			}

			.wrapper p:nth-of-type(2) {
				width: 200px;
				height: 300px;
				border-right: 1px solid white;
				border-left: 1px solid white;
				transform: scaleY(0);
			}

			.wrapper img,.wrapper p{
				transition: all 2s;
			}

			.wrapper:hover img {
				transform: translateX(-40px);
			}
			.wrapper:hover p:nth-of-type(1) {
				transform: scaleX(1);
			}
			.wrapper:hover p:nth-of-type(2) {
				transform: scaleY(1);
			}

HTML代码

<div class="wrapper">
			<img src="imgs/pic9.jpg">
			<p>web大前端</p>
			<p>随便写点什么</p>
			<p></p>
		</div>

平移和缩放用的是一个HTML文件