css3 旋转正方体特效实现

最新推荐文章于 2024-04-01 01:28:13 发布

置顶 xiyunmengyuan

最新推荐文章于 2024-04-01 01:28:13 发布

阅读量818

点赞数 1

分类专栏： css3动画特效学习 web学习进阶之旅文章标签： css3动画旋转立方体效果

本文链接：https://blog.csdn.net/xiyunmengyuan/article/details/106023939

版权

web学习进阶之旅同时被 2 个专栏收录

3 篇文章 0 订阅

订阅专栏

css3动画特效学习

2 篇文章 0 订阅

订阅专栏

实现效果：

在这里插入图片描述

完整实现代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>旋转立方体</title>
		<style type="text/css">
			.container{
				width: 100%;
				height: 1000px;
				background-color: #f5f5f5;
				padding-top: 300px;
			}
			.box {
				width: 400px;
				height: 400px;
				/* background-color: pink; */
				margin: auto;
				position: relative;
			}

			.inner_box {
				position: absolute;
				width: 200px;
				height: 200px;
				margin: auto;
				top: 0;
				left: 0;
				right: 0;
				bottom: 0;
				transform-style: preserve-3d;
				animation: move 5s infinite linear;
			}

			.inner_box:hover .front {
				transform: translateZ(200px);
			}

			.inner_box:hover .back {
				transform: translateZ(-200px);
			}

			.inner_box:hover .left {
				transform: translateX(-200px) rotateY(90deg);
			}

			.inner_box:hover .right {
				transform: translateX(200px) rotateY(-90deg);
			}

			.inner_box:hover .top {
				transform: translateY(-200px) rotateX(90deg);
			}

			.inner_box:hover .bottom {
				transform: translateY(200px) rotateX(-90deg);
			}

			/* .box:hover .front{
				transform: translateZ(200px);
			} */
			.out-div {
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
			}

			.small_box {
				position: absolute;
				width: 100px;
				height: 100px;
				margin: auto;
				top: 0;
				left: 0;
				right: 0;
				bottom: 0;
				transform-style: preserve-3d;
				animation: move 5s infinite linear;
			}

			.out-div img {
				width: 100%;
				height: 100%;
			}

			/* 制作动画 */
			@keyframes move {
				0% {
					transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
				}

				100% {
					transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg);
				}
			}

			.front {
				transform: translateZ(100px);
			}

			.back {
				transform: translateZ(-100px);
			}

			.left {
				transform: translateX(-100px) rotateY(90deg);
			}

			.right {
				transform: translateX(100px) rotateY(-90deg);
			}

			.top {
				transform: translateY(-100px) rotateX(90deg);
			}

			.bottom {
				transform: translateY(100px) rotateX(-90deg);
			}

			.small_front {
				transform: translateZ(50px);
			}

			.small_back {
				transform: translateZ(-50px);
			}

			.small_left {
				transform: translateX(-50px) rotateY(90deg);
			}

			.small_right {
				transform: translateX(50px) rotateY(-90deg);
			}

			.small_top {
				transform: translateY(-50px) rotateX(90deg);
			}

			.small_bottom {
				transform: translateY(50px) rotateX(-90deg);
			}
		</style>
	</head>
	<body>
		<div class="container">
			<div class="box">
				<div class="inner_box">
					<div class="out-div front">
						<img src="../img/pkq1.gif">
					</div>
					<div class="out-div back">
						<img src="../img/pkq2.gif">
					</div>
					<div class="out-div left">
						<img src="../img/pkq3.gif">
					</div>
					<div class="out-div right">
						<img src="../img/pkq4.gif">
					</div>
					<div class="out-div top">
						<img src="../img/pkq5.gif">
					</div>
					<div class="out-div bottom">
						<img src="../img/pkq6.gif">
					</div>
					<div class="small_box">
						<div class="out-div small_front">
							<img src="../img/pkq1.gif">
						</div>
						<div class="out-div small_back">
							<img src="../img/pkq2.gif">
						</div>
						<div class="out-div small_left">
							<img src="../img/pkq3.gif">
						</div>
						<div class="out-div small_right">
							<img src="../img/pkq4.gif">
						</div>
						<div class="out-div small_top">
							<img src="../img/pkq5.gif">
						</div>
						<div class="out-div small_bottom">
							<img src="../img/pkq6.gif">
						</div>
					</div>
				</div>
			</div>
		</div>

	</body>
</html>

总结

该动画效果主要用到一下几种动画效果：

1、translateX(x) 定义转换，只是用 X 轴的值。
translateY(y) 定义转换，只是用 Y 轴的值
translateZ(z) 定义 3D 转换，只是用 Z 轴的值。

2、rotateX(angle) 定义沿着 X 轴的 3D 旋转。
rotateX(angle) 定义沿着 X 轴的 3D 旋转。
rotateZ(angle) 定义沿着 Z 轴的 3D 旋转。

3、transform-style: preserve-3d; //开启3d动画

4、animation: move 5s infinite linear; //设置动画分别对应动画方法持续时间重复播放过渡动画的方式

xiyunmengyuan

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
css3 旋转正方体特效实现

实现效果：完整实现代码<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>旋转立方体</title> <style type="text/css"> .container{ width: 100%; height: 1000px; background-color: #f5f5f5; padding-
复制链接

扫一扫

专栏目录