#今日说码栏目#第二十二集旋转的佩奇-CSDN博客

本文链接：https://blog.csdn.net/abner_/article/details/126130173

transform-style：preserve-3d;设置3D动画效果

animation：

1:animation-name

设置动画的名字，和@keyframs相对应

2:animation-duration

动画执行时间 duration

3:animation-delay

动画执行延时

4:animation-timing-function

动画执行的方式

5:animation-iteration-count

动画执行的次数

可选值：次数（数字）

infinite 无限循环

6:animation-direction

指定动画运行的方向

可选值

normal 默认值：从from向to运行，每次都是这样

reverse 从to到from运行，每次都是这样

alternate 从from向to运行，重复执行动画时反向执行

alternate-reverse 从to向from运行，重复执行动画时反向执行

7:animation-play-state

设置动画的执行状态

可选值：running 默认值动画执行

paused 动画暂停

8:animation-fill-mode

动画的填充模式

可选值：

none默认值动画执行完毕元素回到原来的位置

forwards 动画执行完毕，会停止在动画结束的位置

ackwards 动画延时等待时，元素就会处于开始位置

both 结合了forwards和ackwards的特点

9：简写模式

animation: text 2s 2 2s alternate-reverse;

<!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>Document</title>
		<style>
			.body {
        position: absolute;
			}

			.wrap {
				/* 视图 */
				width: 300px;
				height: 300px;
				perspective: 1000px;
				display: flex;
				position: absolute;
				margin: auto;
				top: 0;
				right: 0;
				bottom: 0;
				left: 0;
			}

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

			.box {
				width: 100px;
				height: 100px;
				margin: 50px auto;
				/* 设置3d变形效果 */
				transform-style: preserve-3d;
				animation: rotate 2s infinite linear;
			}

			.box > div {
				width: 100px;
				height: 100px;
				position: absolute;
			}

			.box1 {
				transform: rotateY(90deg) translateZ(50px);
			}

			.box2 {
				transform: rotateY(-90deg) translateZ(50px);
			}

			.box3 {
				transform: rotateX(90deg) translateZ(50px);
			}

			.box4 {
				transform: rotateX(-90deg) translateZ(50px);
			}

			.box5 {
				transform: rotateZ(90deg) translateZ(50px);
			}

			.box6 {
				transform: rotateZ(0deg) translateZ(50px);
			}

			@keyframes rotate {
				from {
					transform: rotateX(0) rotateY(0) rotateZ(0);
				}

				to {
					transform: rotateX(1turn) rotateY(1turn) rotateZ(0);
				}
			}
		</style>
	</head>

	<body>
		<div class="wrap">
			<div class="box">
				<div class="box1"><img src="./img/1.jpeg" alt="" /></div>
				<div class="box2"><img src="./img/2.jpeg" alt="" /></div>
				<div class="box3"><img src="./img/3.jpeg" alt="" /></div>
				<div class="box4"><img src="./img/4.jpeg" alt="" /></div>
				<div class="box5"><img src="./img/5.jpeg" alt="" /></div>
				<div class="box6"><img src="./img/6.jpeg" alt="" /></div>
			</div>
		</div>
	</body>
</html>

效果如下：