CSS3的2D、3D变换、过度与动画效果

最新推荐文章于 2023-02-24 17:28:52 发布

_xwh

最新推荐文章于 2023-02-24 17:28:52 发布

阅读量871

点赞数

分类专栏：前端知识文章标签： css3 动画

本文链接：https://blog.csdn.net/qq_44174803/article/details/121292940

版权

前端知识专栏收录该内容

13 篇文章 1 订阅

订阅专栏

1. 2D转换方法

在2D转换方法中，存在对元素进行旋转、缩放、拉伸、移动的属性效果。此处主要讲解transform属性中的旋转和缩放、位移效果。

1.1 旋转rotate()

通过下述代码的设置可以的达到旋转的效果，deg是旋转角度，正值为顺时针，负值为逆时针旋转。

transform:rotate(XX deg);
transform:rotate(-10 deg);		//逆时针旋转10度

示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS3中的2D变换</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }
        div {
            width: 100px;
            height: 75px;
            border: 2px solid #ccc;
            margin: 0px auto;
        }
        #rotateDiv {
            transform: rotate(30deg);
        }
        #rotateDiv2 {
            transform: rotate(-30deg);
        }
    </style>
</head>
<body>
    <div>
    </div>
    <div id="rotateDiv">
    </div>
    <div id="rotateDiv2">
    </div>
</body>
</html>

示例效果：
在这里插入图片描述
注意：此处的旋转是以图形的中心点为参照进行旋转的，而不是div区域的左上角！

1.2 缩放scale()

定义解释：
scale(x,y)：只含有一个参数时，第二个参数默认和第一个参数一样。
即scale(x)代表scale(x , x)
在这里插入图片描述
示例效果：

1.3 移动translate（）

（1）定义
translate位移：位置移动。从当前元素的位置处，移动到指定坐标轴位置处。

（2）使用方法
其中取值为数值或者百分比，x代表左右移动，y代表上下移动。

translate(x,y)
translate(value);

（3）单方向位移

translateX(x)
translateY(y)

2. 过渡与动画

2.1 过渡transition

（1）定义
过渡是元素中的某个属性或者多个属性发生状态的变化，指从一个状态变化到另一个状态。

过渡效果的产生是基于属性的变化，存在变化的属性（例如值发生改变、增加或者删减了某些样式）才会显示出过渡效果。而整个过渡过程则是从属性变化前的效果到属性变化后的效果的一个过程。

（2）transition属性
过渡使用方法的默认值是ease，实际上有时候transition只设置前两个值而第三个值置空（即是ease的效果）。
在这里插入图片描述

（3）案例
transition属性第一个值设置为all，代表所有的属性只要发生了变化则会存在transition过渡效果。如果只需要设置几个属性的过渡效果，只需要第一个值写上属性名用逗号隔开即可。

2.2 动画animation

（1）定义
动画效果是指元素属性发生状态的变化，但是这个变化过程中存在多个过渡效果（即起点状态到终点状态之间还存在多个其他状态），因此显现为动画效果。这些状态我们称之为关键帧keyframe。
在这里插入图片描述
（2）animation属性

（3）案例
定义的关键帧需要有个名称，例如下面定义为了mycolor。关键帧keyframe中的百分号是状态的名字，状态名都用百分号来定义，而大括号中的属性代表当前状态的属性值。0%和100%分别代表变化的始末状态。

下面示例的效果是：将鼠标悬浮在div区域上后，对应的div背景会经历四个状态的颜色变化，最终完成红色到绿色的变化显示。

在这里插入图片描述

3. 3D变换

（1）定义
3D变换相比于2D变换在坐标系上多了一个纬度，变成了XYZ三维坐标系，因此我们在设置transform属性前，需要将transform-style设置为preserve-3d，代表是进行3D的效果变化。

在这里插入图片描述
（2）使用方法
其中透视会产生一个近大远小的效果，可根据实际需要来决定是否需要设置透视效果perspective。

（3）案例

<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<title>3D</title>
	<style>
		#stage {	/*舞台*/
			width: 300px;
			margin: 100px auto;
			
			perspective: 200px;
		}

		.box {		/*父容器*/
			width: 100px;
			height: 100px;
			float: left;

			transition: all 1s linear;
			transform-style: preserve-3d;

		}

		img {
			width: 100px;
			height: 75px;
		}

		.x:hover {
			transform: rotateX(360deg);
		}

		.y:hover {
			transform: rotateY(60deg);
		}

		.z:hover {
			transform: rotateZ(60deg);
		}
	</style>

</head>

<body>
	<div id="stage">
		<div class="box x">
			<img src="frog.png" />
		</div>
		<div class="box y">
			<img src="frog.png" />
		</div>
		<div class="box z">
			<img src="frog.png" />
		</div>

	</div>
</body>

</html>