CSS 3

让我打个盹

已于 2022-03-25 14:32:53 修改

阅读量363

点赞数 1

于 2022-03-17 19:25:31 首次发布

本文链接：https://blog.csdn.net/weixin_48494427/article/details/123546266

版权

这篇博客详细介绍了CSS3中的变换特性，包括平移（translate）、旋转（rotate）、缩放（scale）和扭曲（skew），并提供了多个实例演示了这些变换的应用，如元素的居中对齐、图片翻转效果以及小球的跳动动画。同时，讲解了关键帧（@keyframes）的使用，创建了来回跳动的小球动画。这些技术在前端开发中常用于实现交互和动态效果。

摘要由CSDN通过智能技术生成

属性值：transform: translate（平移）rotate(旋转） scale（缩放）skew（扭曲）；

平移：

                transform: translateX(500px); 水平移动
               transform: translateY(300px); 垂直移动
               transform: translate(500px,300px); 水平垂直移动，路径是斜着向右下角（值均可为负）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.box{
				width: 200px;
				height: 200px;
				background-color: #00FFFF;
				transition: 1s;
			}
			.box:hover{
				/*transform: translateX(500px);
				transform: translateY(300px);*/
				transform: translate(500px,300px);
			}
		</style>
	</head>
	<body>
		<div class="box">
			
		</div>
	</body>
</html>

扩展：（居中对齐）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.box{
				width: 400px;
				height: 400px;
				background-color: #00FFFF;
			}
			.box1{
				width: 200px;
				height: 200px;
				background-color: #0000FF;
				transform: translate(50%,50%);
			}
			/*.box1:hover{
				transform: translate(100px,100px);
			}*/
		</style>
	</head>
	<body>
		<div class="box">
			<div class="box1"></div>
		</div>
	</body>
</html>

旋转：

                transform: rotateX(180deg);
               transform: rotateY(180deg);
               transform: rotateZ(180deg);

perspective（透视）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.box4 {
				width: 400px;
				height: 500px;
				border: red solid 1px;
				perspective: 100px;
			}

			.box img {
				width: 400px;
				transition: 1s;
			}

			.box:hover img {
			/*transform: rotateX(180deg);*/
				/*transform: rotatey(180deg);*/
				transform: rotateZ(180deg);
			}
		</style>
	</head>
	<body>
		<div class="box">
			<img src="2/liqingzhao.jpg">
		</div>
	</body>
</html>

缩放：

transform: scaleX(1);
transform: scaleY(1);

值最小为零，不能为负

案例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.box1{
				position: relative;
				width: 500px;
				height: 500px;
				box-shadow: 0 0 0 2px #008000;
			}
			.box1 img{
				width: 300px;
				transition: 1s;
				position: absolute;
				left: 0;top: 0;bottom: 0;right: 0;
				margin: auto;
			}
			.box1:hover img{
				transform: scale(0.5);
			}
			.box1>div{
				position: absolute;
				left: 0;top: 0;bottom: 0;right: 0;
				margin: auto;
			}
			.box1 .line1{
				width: 450px;
				height: 300px;
				border-top: #00FF00 2px solid;
				border-bottom: #00FF00 2px solid;
				transform: scaleX(0);
				transition: 0.5s;
			}
			.box1 .line2{
				width: 300px;
				height: 450px;
				border-left: #00FF00 2px solid;
				border-right: #00FF00 2px solid;
				transform: scaleY(0);
				transition: 0.5s;
	
			}
			.box1:hover .line1{
				transform: scale(1);
			}
			.box1:hover .line2{
				transform: scale(1);
			}
		</style>
	</head>
	<body>
		<div class="box1">
			<img src="img/touxiang.png" >
			<div class="line1"></div>
			<div class="line2"></div>
		</div>
	</body>
</html>

扭曲：

transform: skewX();
transform: skewY();
transform:skew(x-angle,y-angle)

transform-origin 元素的变换基点

缩写：

ransform:ratate(旋转值） scale（缩放值）skew（扭曲值） translate（移动值）；之间用空格隔开

关键帧：

先定义关键帧

                @keyframes name{
               from{}
               to{}

属性值：  animation-name: name;/*名称*/
               animation-duration: 1s;/*动画的持续时间*/
               /*animation-timing-function: linear;*/
               /*animation-timing-function: steps(10);/*步数*/
               /*animation-delay: 1s;/*延迟*/
               animation-iteration-count: infinite;/*动画的播放次数*/
               animation-direction: alternate;动画的运动方向

案例：来回跳动的小球

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			@keyframes myrun{/*定义关键帧*/
				0%{transform: translateX(0);}
				25%{transform: translatey(800px);}
				50%{transform: translatey(600px);}
				75%{transform: translateY(400px);}
				100%{transform: translatey(200px);}
			}
			.box1{
				width: 100px;height: 100px;
				border-radius: 50%;
				background-image: radial-gradient(#fff,#000);
				animation-name: myrun;/*名称*/
				animation-duration: 1s;/*动画的持续时间*/
				/*animation-timing-function: linear;*/
				/*animation-timing-function: steps(10);/*步数*/
				/*animation-delay: 1s;/*延迟*/
				animation-iteration-count: infinite/*无限次*/;/*动画的播放次数*/
				animation-direction: alternate/*开始-结束-开始*/;/*reverse（反向运动）/*动画的运动方向*/
			}
		</style>
	</head>
	<body>
		<div class="box1"></div>
	</body>
</html>