css3 旋转正方体特效实现

最新推荐文章于 2022-10-15 15:43:20 发布
置顶 最新推荐文章于 2022-10-15 15:43:20 发布
阅读量818 收藏 4
点赞数 1
分类专栏： css3动画特效学习 web学习进阶之旅 文章标签： css3动画 旋转立方体效果
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xiyunmengyuan/article/details/106023939
版权

实现效果：

在这里插入图片描述

完整实现代码

<!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
    评论
专栏目录
HTML5 3D正方体旋转动画 很酷的3D特效
08-23
之前我们分享过很多非常不错的HTML5 3D立体动画特效，尤其是一些HTML5 Canvas动画，更是酷得让人惊叹。今天我们又要来分享一款好玩的HTML5 3D效果，该特效是一个可以旋转播放的正方体，你可以从多个视角来查看正方体，非常不错的3D效果。
CSS3自动旋转正方体3D特效
07-28
**CSS3自动旋转正方体3D特效详解** 在网页设计中，为了增强用户体验和视觉效果，CSS3的3D变换功能被广泛应用。本篇将深入解析如何利用CSS3的keyframes属性创建一个自动旋转的正方体3D特效，以此实现动态的图片相册...
CSS3 实现旋转立方体效果
qq_39454432的博客
06-28 205
CSS3 实现旋转立方体效果 index.html DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>旋转立方体</title> <link rel="styleshe
HTML5 CSS3 实现旋转的3D正方体
weixin_34289744的博客
05-10 241
1.transform属性对元素进行旋转、缩放、移动或倾斜。具体参考：http://www.w3school.com.cn/cssref/pr_transform.asp 　　transform-style: preserve-3d;使被转换的子元素保留其 3D 转换，具体参考：http://www.w3school.com.cn/cssref/pr_transform-style.asp 　...
使用css3 实现旋转的立方体
gjc9620的专栏
02-15 751
demo在此代码贴在这里<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>nesting</title> </head> <style> .center{ position: absolute; left: 0px; bottom: 0px
CSS——正方体360°旋转动画 效果
NanChen的博客
12-26 1759
对3D图形做动画效果
纯CSS3绘制正方体旋转动画特效
06-24
纯CSS3绘制正方体旋转动画特效是一种利用CSS3的强大功能来实现的3D图形变换技术，无需JavaScript或其他脚本语言。CSS3中的3D转换和透视效果使得开发者能够创建出具有深度感的立体视觉效果，例如这个正方体旋转动画。...
CSS3自动旋转正方体3D特效.zip
最新发布
10-09
【CSS3自动旋转正方体3D特效】是一种在网页设计中常见的动态视觉效果，它利用了CSS3的3D变换功能，使一个正方形在网页上呈现出立体旋转的效果，为用户带来更丰富的交互体验。这个特效代码适用于各种网页项目，如产品...
css3样式实现正方体旋转效果
critans的博客
10-15 735
css实现正方体旋转效果
css3动画，实现正方体旋转
一只程序猿
03-11 1152
思路很简单，大div里面放6个小div，小div使用绝对定位脱离文档流，3D转换加transform-Origin更改元素位置拼成一个正方体。最后使大div转动起来。 <template> <div class="flex jc_c ai_c" style="height: 800px;"> <div class="max_div"> <div class="box1">1</div> <div class="box2"
纯CSS3绘制正方体旋转动画特效.zip
07-05
纯CSS3绘制正方体旋转动画特效是一款3D立体效果不错的正方形旋转动画特效下载。
vue.js立方体旋转播放特效特效代码
03-20
vue.js立方体旋转播放特效是一款立方体旋转播放音乐相册展示特效。
html5正方体旋转
09-11
html5正方体旋转
html5 3D旋转立方体
07-19
使用html5+css3+jquery组合，一个可以通过按键控制立方体旋转的demo，具有3D效果。
HTML5/CSS3 3D立方体扭曲动画
08-23
之前我们有分享过很多3D的旋转立方体动画，像HTML5 3D立方体旋转动画、HTML5 3D正方体旋转动画 很酷的3D特效等等。今天要分享的这款HTML5动画也是和立方体有关，立方体会在不同的角度进行扭曲、放大和缩小，效果非常不错。
纯css 3D立方体特效
qq_42202710的博客
01-06 265
纯css 3D立方体特效 超好看特效哦 <!doctype html> <html> <head> <meta charset="utf-8"> <title></title> <style> html { background:#000; height:100%; } body{ height: 100%;...
CSS3 3D炫酷旋转正方体特效
Infatuatedmonkey的博客
05-17 748
1.效果图 2.效果分析 这里主要用到了css3中的transform属性，和动画animation， 通过transform来拼装正方体，再通过动画让它旋转起来。 3.源码 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>CSS3 3D选装魔方</title> <style> body{ /* 设置成黑色背景，使得
CSS布局案例 2-51 立方体旋转效果
dpl12的博客
04-25 333
文章目录前言实现过程1.步骤2.代码3.效果 前言 使用css3实现立方体旋转效果。 实现过程 1.步骤 立方体旋转效果实现步骤: 1、使用ul li创建立方体的6个面，用绝对定位方式将6个面重合在一块 2、保持一个面不动，移动和旋转其他5个面，组成立方体，使用3d效果和景深的方式实现立体效果（rotate旋转,X为水平轴，Y为垂直轴，Z为眼睛垂直屏幕的轴） 3、设置动画效果，沿着Y轴旋转，旋转原点为X\Y\Z的中心点 2.代码 <!DOCTYPE html> <h
制作好看的3D动态旋转正方体
Xyp9x的博客
01-03 973
制作好看的3D动态旋转正方体 效果展示入口 制作方法主要运用css3中的animation 和 transform. 1. 先在html中创建出大div(正方体整体)，并在其中创建出6个小div(正方体6个面)。 2. 然后在css中先将基本位置和大小确定，并确定视角视距: perspective: 2000px; perspective-origin: center 200px; ...
css3d旋转正方体
09-23
CSS3D旋转正方体可以通过使用CSS的transform属性来实现。使用rotate3d函数可以指定旋转轴和旋转角度。在给定的示例中，使用了一个名为box1的div元素，并在:hover时应用了旋转效果。 具体过程如下： 1. 创建一个包含...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值