前端学习（CSS3 三）——转换、过渡、动画

最新推荐文章于 2023-06-21 08:32:31 发布

VIP文章这名没人用吧

最新推荐文章于 2023-06-21 08:32:31 发布

阅读量452

点赞数 3

分类专栏： css基础知识文章标签： css3 css

本文链接：https://blog.csdn.net/weixin_43866830/article/details/115272366

版权

一、CSS3转换

1.定义

转换可以对元素进行移动、旋转、缩放、倾斜等，转换就是让某个元素发生形状、大小、位置上的改变。

2.语法

转换的语法如下：

transform:none | <transform-function>*;/*默认值为none*/

none代表不应用任何的转换，而表示要应用的一个或多个CSS变换函数，变换函数主要包括有：
2D转换：平面上的移动、旋转、缩放、倾斜。
3D转换：三维立体上的移动、旋转、缩放。

3.2D转换

2D转换的函数主要包括有：
translate()：移动；
scale()：缩放；
rotate()：旋转；
skew()：倾斜。
这里先附上一张空间上的图示，以下文章会用到：
在这里插入图片描述

translate()

translate(n)表示元素沿着X轴和Y轴移动，translateX(n)表示沿着X轴，translate(n)表示沿着Y轴。具体示例如下：
还未设置移动时：

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title></title>
	<style type="text/css">
		.box{
   
			width: 500px;
			height: 500px;
			background-color: #00FFFF;
			text-align: center;
			line-height: 50px;
			position: absolute;
		}
		.box1{
   
			width: 500px;
			height: 500px;
			background-color: #FF4400;
			opacity: 0.8;
			position: absolute;
			left: 0;
			text-align: center;
			line-height: 50px;
		}
	</style>
</head>
<body>
	<div class="box">
		<i class="box1"></i>
	</div>
</body>
</html>

结果：
在这里插入图片描述
设置了偏移后：

.box i{
   
	transform: translateX(100px);
}

结果：
在这里插入图片描述
当值为负值则向左偏移，Y轴偏移同理，就不作演示了。同时translate可以对两个方向同时设置偏移量，语法是：translate(x, y);如果只设置一个参数，会默认第二个参数为0。

scale()

scale()表示元素在X轴和Y轴的缩放。scaleX(n)表示在X轴上的缩放，scaleY(n)表示在Y轴上的缩放。值默认为1，当n>1时，元素放大，当0<n<1时，元素缩小，具体示例如下（与translate同理）：

.box i{
   
	transform: scale(0.8, 0.5);
}

结果：
在这里插入图片描述
与translate()不同的是，如果scale()只设置一个参数，会默认两个参数值都一样。

rotate()

rotate()表示元素顺时针给定的角度，负数表示逆时针旋转，角度图示如下：
在这里插入图片描述
如这里设置顺时针旋转45度：

.box i{
   
	transform: rotate(45deg);
}

最低0.47元/天解锁文章

这名没人用吧

关注

3
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
前端学习（CSS3 三）——转换、过渡、动画

前端学习之CSS3一、CSS3转换1.定义2.语法3.2D转换一、CSS3转换1.定义转换可以对元素进行移动、旋转、缩放、倾斜等，转换就是让某个元素发生形状、大小、位置上的改变。2.语法转换的语法如下：transform:none | <transform-function>*;/*默认值为none*/ none代表不应用任何的转换，而表示要应用的一个或多个CSS变换函数，变换函数主要包括有： 2D转换：平面上的移动、旋转、缩放、倾斜。 3D转换：三维立体上的移
复制链接

扫一扫