前端开发--css3--transform变换

最新推荐文章于 2024-08-28 23:13:18 发布

原创最新推荐文章于 2024-08-28 23:13:18 发布 · 390 阅读

0 ·

CC 4.0 BY-SA版权

html +css +javascript 专栏收录该内容

43 篇文章

订阅专栏

本文探讨了CSS3中的transform变换特性，包括基本的旋转应用，如何设置不同的旋转中心以实现独特效果，以及三维旋转的对比分析。还介绍了如何利用transform实现吸引眼球的翻页效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在这里插入图片描述
基本应用

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>transform</title>
	<style type="text/css">
		.box{
			width: 200px;
			height: 200px;
			border:1px solid #000;
			margin:50px auto 0;
			background-color: pink;
			/*   translate位移比定位做的位移性能高，建议使用这种位移*/
			transform:translate(0px,0px);

			transition:all 500ms ease;
		}

		.box:hover{
			transform:translate(30px,30px);
		}

		.box02{
			width: 200px;
			height: 200px;
			border:1px solid #000;
			margin:50px auto 0;
			background-color: pink;
			transform:scale(1,1);
			transition:all 500ms ease;
		}

		.box02:hover{
			transform:scale(2,2);
		}

		.box03{
			width: 200px;
			height: 200px;
			border:1px solid #000;
			margin:50px auto 0;
			background-color: pink;
			transform:rotate(0deg);
			transition:all 500ms ease;
		}

		.box03:hover{
			transform:rotate(45deg);
		}

		.box04{
			width: 200px;
			height: 200px;
			border:1px solid #000;
			margin:50px auto 0;
			background-color: pink;
			transform:skew(0,0);
			transition:all 500ms ease;
		}

		.box04:hover{
			transform:skew(45deg,0);
		}


	</style>
</head>
<body>
	<div class="box"></div>
	<div class="box02"></div>
	<div class="box03"></div>
	<div class="box04"></div>
</body>
</html>

设置不同的旋转中心，对比效果

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>transform</title>
	<style type="text/css">
		.box01,.box02,.box03,.box04{
			width: 200px;
			height: 200px;
			border:1px solid #000;
			margin:20px;
			background-color: pink;
			float: left;
			transform:rotate(0deg);
			transition:all 500ms ease;

		}

		.box01:hover,.box02:hover,.box03:hover,.box04:hover{
			transform:rotate(45deg);
		}

		.box02{
			transform-origin:left center;
		}

		.box03{
			transform-origin:left top;
		}

		.box04{
			transform-origin:50px,50px;
		}



	</style>
</head>
<body>
	<div class="box01"></div>
	<div class="box02"></div>
	<div class="box03"></div>
	<div class="box04"></div>
</body>
</html>

三维旋转对比：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>三维旋转</title>
	<style type="text/css">
		/*
			旋转的轴向：
			X轴：从上往下 ：
			Y轴：从左往右 ：
			Z轴： 从屏幕内往屏幕外

			判断旋转的方向：让轴向对着自己，顺时针方向。
		*/


		.box{
			width: 200px;
			height: 200px;
			background-color: pink;
			border:2px solid #000;
			margin:50px auto 0;
			/*  做变形动画需要设置初始值，不设置容易出现跳变的bug  */
			transform:perspective(800px)  rotatex(0deg);
			transition:all  500ms ease;
		}

		.box:hover{
			transform:perspective(800px)  rotatex(45deg);
		}

		.box02{
			width: 200px;
			height: 200px;
			background-color: pink;
			border:2px solid #000;
			margin:50px auto 0;

			transform:perspective(800px)  rotatey(0deg);
			transition:all  500ms ease;
		}

		.box02:hover{
			transform:perspective(800px)  rotatey(45deg);
		}
		
		.box03{
			width: 200px;
			height: 200px;
			background-color: pink;
			border:2px solid #000;
			margin:50px auto 0;

			transform:perspective(800px)  rotatez(0deg);
			transition:all  500ms ease;
		}

		.box03:hover{
			transform:perspective(800px)  rotatez(45deg);
		}


	</style>
</head>
<body>
	<div class="box"></div>
	<div class="box02"></div>
	<div class="box03"></div>
</body>	
</html>

翻页效果：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>翻页动画</title>
	<style type="text/css">
		.box{
			width: 1000px;
			height: 272px;
			border:1px solid black;
			margin:50px auto 0;
			font-size: 0;
			background-color: pink;
		}

		.box img{
			transform-style:preserve-3d;
			transform:perspective(800px)  rotatey(0deg);
			transition:all 500ms ease;
		}
		 .pic01{
			transform-origin:right center;
		}

		.pic02{
			transform-origin:left center;
		}

		.pic01:hover {
			transform:perspective(800px)  rotatey(180deg);
		}

		.pic02:hover {
			transform:perspective(800px)  rotatey(-180deg);
		}




	</style>
</head>
<body>
	<div class="box">
		<img src="images/location_bg.jpg"  alt='背景图'  class='pic01'>
		<img src="images/location_bg.jpg"  alt='背景图'  class='pic02'>
	</div>
</body>
</html>