css3 旋转正方体特效实现

实现效果:

在这里插入图片描述

完整实现代码

<!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; //设置动画 分别 对应 动画方法 持续时间 重复播放 过渡动画的方式

  • 1
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值