css32d变换

1.缩放:(scale)

transform:scale(2);--------水平/垂直方向扩大2倍

transform:scaleX(2);--------水平方向扩大2倍

transform:scaleY(2);--------垂直方向扩大2倍

2.扭曲(skew)

transform:skew(45deg);--------扭曲45度

transform:skewX(45deg);--------水平扭曲45度

transform:skewY(45deg);--------垂直扭曲45度

3.旋转(rotate)

transform:rotate(45deg);--------延x/y轴旋转45度

transform:rotateX(45deg);---------延x轴旋转45度

transform:rotateY(45deg);---------延y轴旋转45度

4.位移(translate)

transform:translate(200px,200px);--------延x/y轴位移200px

transform:translateX( );---------延x轴移动

transform:translateY( );---------延y轴移动


<style>
			.wrap{
				width: 230px;
				height: 350px;
				margin: 100px auto;
				position: relative;
			}
			img{
				width: 230px;
				height: 350px;
				border: 1px solid black;
				position: absolute;
				box-shadow: 1px 1px 10px gray;
				transform-origin:center bottom;
				transition: all 2s; 
			}
			.wrap:hover img:nth-child(6){
				transform:rotate(-10deg);
			}
			.wrap:hover img:nth-child(5){
				transform:rotate(-20deg);
			}
			.wrap:hover img:nth-child(4){
				transform:rotate(-30deg);
			}
			.wrap:hover img:nth-child(3){
				transform:rotate(-40deg);
			}
			.wrap:hover img:nth-child(2){
				transform:rotate(-50deg);
			}
			.wrap:hover img:nth-child(1){
				transform:rotate(-60deg);
			}
			.wrap:hover img:nth-child(8){
				transform:rotate(10deg);
			}
			.wrap:hover img:nth-child(9){
				transform:rotate(20deg);
			}
			.wrap:hover img:nth-child(10){
				transform:rotate(30deg);
			}
			.wrap:hover img:nth-child(11){
				transform:rotate(40deg);
			}
			.wrap:hover img:nth-child(12){
				transform:rotate(50deg);
			}
			.wrap:hover img:nth-child(13){
				transform:rotate(60deg);
			}
		</style>
	</head>
	<body>
		<div class="wrap">
			<img src="../img/pk1.png"/>
			<img src="../img/pk1.png"/>
			<img src="../img/pk1.png"/>
			<img src="../img/pk1.png"/>
			<img src="../img/pk1.png"/>
			<img src="../img/pk1.png"/>
			<img src="../img/pk1.png"/>
			<img src="../img/pk1.png"/>
			<img src="../img/pk1.png"/>
			<img src="../img/pk1.png"/>
			<img src="../img/pk1.png"/>
			<img src="../img/pk1.png"/>
			<img src="../img/pk1.png"/>
		</div>
	</body>

在这里插入图片描述

©️2020 CSDN 皮肤主题: 数字20 设计师:CSDN官方博客 返回首页