css3-----2D变换及案例

最新推荐文章于 2022-06-08 00:04:14 发布

qq_43552118zx

最新推荐文章于 2022-06-08 00:04:14 发布

阅读量398

点赞数

分类专栏： css 文章标签： css

本文链接：https://blog.csdn.net/qq_43552118/article/details/84206711

版权

css 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

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轴移动

案例1

<style type="text/css">
			div{
				width:400px;
				height: 300px;
				background: pink;
				margin:100px;
				float: left;
				transition: all 2s; 
			}
			.xuanzhuan:hover{
				transform:rotate(180deg);
			}
			.niuqu:hover{
				transform: skew(45deg);
			}
			.weiyi:hover{
				transform: translate(100px,100px);
			}
			.suofang:hover{
				transform:scale(2);
			}
		</style>
	</head>
	<body>
		<div class="xuanzhuan"></div>
		<div class="niuqu"></div>
		<div class="weiyi"></div>
		<div class="suofang"></div>
	</body>

案例2

<style type="text/css">
		body{
			background:cadetblue;
		}
			.wrap{
				width:440px;
				height:491px;
				margin:100px auto;
				
			}
			.wrap>img:nth-child(1){
				transform: rotate(120deg) translate(200px,-100px);
			}
			.wrap>img:nth-child(2){
				transform: rotate(45deg) translate(500px,300px);
			}
			.wrap>img:nth-child(3){
				transform: rotate(150deg) translate(-200px);
			}
			.wrap>img:nth-child(4){
				transform: rotate(180deg) translate(200px);
			}
			.wrap>img:nth-child(5){
				transform: rotate(60deg) translate(300px,-300px);
			}
			.wrap>img:nth-child(6){
				transform: rotate(90deg) translate(350px,200px);
			}
			.wrap>img:nth-child(7){
				transform: rotate(360deg) translate(200px);
			}
			.wrap>img:nth-child(8){
				transform: rotate(145deg) translate(300px);
			}
			.wrap>img:nth-child(9){
				transform: rotate(270deg) translate(200px,-400px);
			}
			/*img{
				transition: all 3s; 
			}*/
			.wrap:hover img{
			   transform: rotate(0deg) translate(0px);
			}
		</style>
	</head>
	<body>
		<div class="wrap">
			<img src="../img/shield_1_01.png"/>
			<img src="../img/shield_1_02.png"/>
			<img src="../img/shield_1_03.png"/>
			<img src="../img/shield_1_04.png"/>
			<img src="../img/shield_1_05.png"/>
			<img src="../img/shield_1_06.png"/>
			<img src="../img/shield_1_07.png"/>
			<img src="../img/shield_1_08.png"/>
			<img src="../img/shield_1_09.png"/>
		</div>
	</body>

效果图

案例3

<style type="text/css">
			.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>

效果图