css32d變換

goodcaoyu發表於2020-10-19
CSSS3

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>

在這裡插入圖片描述

相關文章