CSS特效和形变

最新推荐文章于 2024-08-31 09:24:27 发布

窗台的花花

最新推荐文章于 2024-08-31 09:24:27 发布

阅读量641

点赞数

分类专栏：前端学习小案例文章标签： css

本文链接：https://blog.csdn.net/qq_40116418/article/details/78664906

版权

前端学习小案例专栏收录该内容

9 篇文章 0 订阅

订阅专栏

一：CSS形变

1. 2D形变

需要用到的属性：

transform

缩放

transfrom.scale(2)；放大两倍

旋转

transfrom:rotate(45deg); /*顺时针旋转45度*/

平移

transform:translate(100px,300px)； x轴平移100px，y轴平移300px。

扭曲，倾斜

transform：skew(30deg,30deg)；x轴，y轴扭曲30度。

矩阵

transfrom：matrix(1,0,0,1,100,100);

matrix() 6个属性的意思是：

第一个宽度比例1就是原大小，

第二个是上下倾斜1就是2倍，2就是3倍，0就是不倾斜，

第三个是左右倾斜，数字和第2个一样的意思，

第四个是高度比例1就是原大小，

第五个是x方向的像素位移，x方向就是左右，

第六个是y方向的像素位移，y方向就是上下。

index.html:

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title>2D形变</title>

		<style>
			* {
				margin: 0px auto;
			}
			
			body {
				width: 100px;
			}
			
			.box {
				width: 50px;
				height: 50px;
				background: cadetblue;
				border: 1px solid red;
			}
			
			.box1 {
				margin-top: 10px;
				width: 70px;
				height: 70px;
				background: blue;
				border: 1px solid yellow;
				
			}
			.box2{
				margin-top: 10px;
				width: 70px;
				height: 70px;
				background: gold;
				border: 1px solid yellow;
			}
			.box3{
				margin-top: 10px;
				width: 70px;
				height: 70px;
				background: greenyellow;
				border: 1px solid yellow;
			}
			.box4{
				margin-top: 10px;
				width: 70px;
				height: 70px;
				background: cyan;
				border: 1px solid yellow;
			}
			.box5{
				margin-top: 10px;
				width: 70px;
				height: 70px;
				background: fuchsia;
				border: 1px solid yellow;
			}
			
			.box:hover {
				transform: rotate(30deg);
			}
			
			.box1:hover {
				transform: scale(2);
				
			}
			.box2:hover{
				transform: scaleX(0.3) scaleY(3)rotate(45deg);
			}
			.box3:hover{
				transform: skew(30deg,30deg);
			}
			.box4:hover{
				
				transform: matrix(2,30,30,2,20,20);
			}
			.box5:hover{
				transform: rotateX(30deg) rotateY(50deg) rotateZ(60deg);
				transform-style: preserve-3d;
			}
			
			
		</style>
	</head>

	<body>
		<div class="box">

		</div>
		<div class="box1">

		</div>
		<div class="box2">
			
		</div>
		<div class="box3">
			
		</div>
		<div class="box4">
			
		</div>
		<div class="box5">
			
		</div>
	</body>

</html>

2. 3D形变

demo1.html：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		
		<!--帧动画-->
		<style type="text/css">
			.box{
				height: 80px;
				width: 80px;
				background: red;
			}
			.box:hover{
				animation: divAnimation 5s;
			}
			
			/*定义帧动画*/
			@-webkit-keyframes divAnimation{
				from{
					background: red;
					width: 80px;
				}
				20%{
					background: green;
					width: 100px;
				}
                 50%{
                 	background: blue;
                 	width: 120px;
                 }   
                 70%{
                 	background: pink;
                 	width: 80px;
                 }
                 to{
                 	background: black;
                 	width: 80px;
                 }
			}
		</style>
	</head>
	
	
	<body>
		<div class="box">
			
		</div>
	</body>
</html>