使用css3 3D立方体旋转

最新推荐文章于 2024-03-12 07:08:45 发布
最新推荐文章于 2024-03-12 07:08:45 发布
阅读量273 收藏 1
点赞数
分类专栏： # JS 文章标签： css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_44973159/article/details/104046156
版权

首先我们看一下效果做出来是什么样子的
在这里插入图片描述
源代码如下：（直接复制以下代码是无法和上图的效果一样，需要注意图片的导入，）

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta http-equiv="X-UA-Compatible" content="ie=edge">
		<title>3D立体旋转</title>
		<link rel="stylesheet" href="sytle.css">
	</head>
	<style type="text/css">
		* {
			padding: 0;
			margin: 0;
		}

		html {
			width: 100%;
			height: 100%;
			background-image: url(img/360wallpaper.jpg);
		}

		.wrapper {
			width: 200px;
			margin: 200px auto;
			perspective: 1000px;
		}

		.wrapper .cube {
			width: 200px;
			height: 200px;
			position: relative;
			/*设置3d环境*/
			transform-style: preserve-3d;
			transform: rotateX(-50deg) rotateY(-50px);
			animation: transform 8s linear infinite;
		}

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

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

		.cube>div {
			width: 100%;
			height: 100%;
			border: 10px solid grey;
			position: absolute;
			top: 0;
			line-height: 200px;
			background-color: rgba(51, 51, 51, .3);
		}

		.out-front {
			transform: translateZ(100px);

		}

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

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

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

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

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

		.cube>span {
			display: block;
			width: 90px;
			height: 90px;
			position: absolute;
			top: 50%;
			left: 50%;
			margin-top: -45px;
			margin-left: -45px;
			border: 5px solid #424242;
			border-radius: 30%;
			background-color: #ffe7f9;
			opacity: 0.7;
		}

		.in-front {
			transform: translateZ(45px);
			justify-content: center;
			align-items: center;
		}

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

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

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

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

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

		.points {
			display: block;
			border-radius: 50%;
			width: 20px;
			height: 20px;
			margin: 5px;

		}

		/* 为1点的父盒子设置 */
		span.in-front {
			display: flex;
			justify-content: center;
			align-items: center;
		}

		.in-front>span {
			width: 40px;
			height: 40px;
		}

		/* 为2点的盒子设置 */
		span.in-left {
			display: flex;
			justify-content: center;
		}

		span.in-left>.pitL2 {
			align-self: flex-end;
		}

		.in-left>span,
		.in-right>span {
			width: 25px;
			/*2点和4点都是排横纵两排，所有设置一样大小*/
			height: 25px;
			margin: 10px;
		}

		/* 设置3点的盒子 */
		span.in-back {
			display: flex;
		}

		.in-back .pitB2 {
			align-self: center;
		}

		.in-back .pitB3 {
			align-self: flex-end;
		}

		/* 设置4点的盒子 */
		span.in-right {
			display: flex;
			/* 不设置对齐方式，默认为主轴对齐 */
			/* 换行 */
			flex-wrap: wrap;
		}

		/* 设置5点的盒子 */
		span.in-top {
			display: flex;
		}

		.in-top .pitT1,
		.in-top .pitT3 {
			display: flex;
			flex-direction: column;
			justify-content: space-between;
		}

		.in-top .pitT2 {
			display: flex;
			align-self: center;
		}

		/* 设置6点的盒子 */
		span.in-bottom {
			display: flex;
			flex-wrap: wrap;
			align-content: space-around;
		}

		.cube:hover .out-front {
			transform: translateZ(200px);

		}

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

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

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

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

		.cube:hover .out-bottom {
			transform: translateY(200px) rotateX(-90deg);
		}
	</style>
	<body>
		<div class="wrapper">
			<div class="cube">
				<div class="out-front">
					<img src="img/sogou20191106_012048.jpg" />
				</div>
				<div class="out-back">
					<img src="img/sogou20191106_012048.jpg" />
				</div>
				<div class="out-left">
					<img src="img/sogou20191106_012048.jpg" />
				</div>
				<div class="out-right">
					<img src="img/sogou20191106_012048.jpg" />
				</div>
				<div class="out-top">
					<img src="img/sogou20191106_012048.jpg" />
				</div>
				<div class="out-bottom">
					<img src="img/sogou20191106_012048.jpg" />
				</div>
				<span class="in-front">
					<span class="points"></span>
				</span>
				<span class="in-back">
					<span class="points"></span>
					<span class="points pitB2"></span>
					<span class="points pitB3"></span>
				</span>
				<span class="in-left">
					<span class="points"></span>
					<span class="points pitL2"></span>
				</span>
				<span class="in-right">
					<span class="points"></span>
					<span class="points"></span>
					<span class="points"></span>
					<span class="points"></span>
				</span>
				<span class="in-top">
					<span class="pitT1">
						<span class="points"></span>
						<span class="points"></span>
					</span>
					<span class="pitT2">
						<span class="points"></span>
					</span>
					<span class="pitT3">
						<span class="points"> </span>
						<span class="points"></span>
					</span>
				</span>
				<span class="in-bottom">
					<span class="points"></span>
					<span class="points"></span>
					<span class="points"></span>
					<span class="points"></span>
					<span class="points"></span>
					<span class="points"></span>
				</span>
			</div>
		</div>

	</body>
</html>
Modify_QmQ
关注
专栏目录
CSS 3D立方体旋转
Drizzlejj的博客
12-20 294
1.效果如图 2.上码 <!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"> .
CSS3 3D立方体旋转展示特效
06-24
在本文中，我们将深入探讨如何使用CSS3和GSAP（GreenSock Animation Platform）来创建一个3D立方体旋转展示特效。这个特效可以用于网站设计、交互式元素或动态图形展示，为用户带来丰富的视觉体验。 首先，让我们...
旋转立方体CSS3
weixin_45773503的博客
03-07 199
旋转立方体 css3的学习 html部分： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> ...
html css 正方体旋转,纯CSS画出旋转的正立方体
weixin_42524013的博客
06-20 157
html {background:linear-gradient(#9ed128 0%,#358b98 80%);height:1000px;opacity:0.8;}.wrapper {margin-top:200px;perspective:1000px;}.cube {height:200px;width:200px;position:relative;margin:auto;transfo...
css3实现正方体和旋转效果
rufeike的博客
10-22 4031
css3实现正方体和旋转效果 实现效果图 涉及知识点 3D移动 方法：translate3d(x,y,z) 单独设置：translateX(length)，translateY(length)，translateZ(length) 3D旋转 方法：rotate3d(x,y,z,angle) 3D动画结果保留设置 transform-style:preserve-3d;子元素将保留其3d位置 -...
css3实现3D立方体旋转特效源码
最新发布
爱酷码的博客
03-12 881
CSS3自动旋转正方体3D特效是一款基于css3 keyframes属性制作的图片相册自动旋转立方体特效。
css3立方体旋转效果,jQuery+CSS3实现3D立方体旋转效果
weixin_34395361的博客
08-04 285
本文介绍了如何利用jQuery+CSS3实现3D立方体旋转效果，先看一看效果图：切换图片过程中，图片进行旋转：HTML结构3D图片画廊的图片列表和导航按钮分别使用两个无序列表来制作。 Image 1Image 2Image 3Image 4点击上面的按钮切换图片CSS样式为了制作3D透视效果，需要在#css3dimageslider元素上设置perspective 透视属性，并在它里...
纯用CSS来实现3D立方体旋转效果
qq_44958875的博客
07-14 2150
这次用纯CSS来实现3D立方体旋转效果 效果如下（可以想象成一个旋转的立方体） HTML部分 首先 创建一个ul标签 在其ul标签下的6个li标签 相当于正方体的6个面 <body> <ul> <li></li> <li></li> <li></li...
纯css实现3D立方体
hhzzcc_的博客
04-04 3714
纯css实现3D立方体特效，通过3D旋转和平移原理实现，话不多说直接贴代码&lt;html&gt; &lt;head&gt; &lt;style type="text/css"&gt; body,html{ margin: 0; } body{ display: flex; ...
android 3d立方体旋转,CSS3实现3D旋转立方体
weixin_42388716的博客
05-29 158
@charset "utf-8";/* CSS Document */* {list-style:none;margin:0;padding:0;font-size:24px;color:#FFF;}body {perspective:1000px;animation:backChange 10s alternate infinite;}.one {width:200px;height:200px...
css3立方体3d旋转,css3 3D旋转正方体
weixin_33562004的博客
08-03 213
再来一个3D的案例，本实例自谷歌，技术自然不用说了，那是一级棒。个人能力有限，我就挑简单的分析下呵呵。说下这个正方体的实现吧，先设置父级元素的transform-style:preserve-3d，然后定义各个面的宽高及绝对定位并设置scale3D为1.2倍，最后就是把各个面分别运用rotateX，rotateY，再运用translateZ拉开距离。至于旋转的运动则是设置父元素的animation...
jQuery+CSS3 3D立方体旋转图标菜单代码
06-05
在本文中，我们将深入探讨如何使用jQuery和CSS3技术创建一个具有3D立方体旋转效果的图标菜单。这种菜单设计可以为网站增加视觉吸引力，并提供交互式的用户体验。 首先，jQuery是一个广泛使用的JavaScript库，它简化...
jQuery加CSS3 3D立方体旋转图标菜单代码.zip
07-11
在本项目中，"jQuery加CSS3 3D立方体旋转图标菜单代码"是一个结合了JavaScript库jQuery和CSS3技术的交互式菜单设计。这个菜单以其独特的3D立方体旋转效果吸引用户注意力，为网站增添现代感和动态交互性。下面我们将...
CSS3 3D立方体旋转展示特效特效代码
03-20
本篇将深入探讨"CSS3 3D立方体旋转展示特效"，以及如何使用GSAP（GreenSock Animation Platform）来制作动画。 首先，让我们理解CSS3的3D转换。3D转换是CSS3新增的一种特性，它允许元素在三维空间内进行变换，如...
CSS3 3D立方体旋转动画.zip
05-24
在本主题中，我们将深入探讨如何使用CSS3创建一个3D立方体旋转动画。这个技术在现代网页设计中被广泛运用，为用户带来引人入胜的交互体验。"CSS3 3D立方体旋转动画"是利用CSS3的3D变换特性来实现一个六面体的动态...
简单的网页设计，以学校官网为例
热门推荐
共勉
12-17 1万+
以本校官网为例， 代码如下：下载同一个html下。 注意的是：图片 1.jpg 19.png 36.png 50.png 206.png banner2.jpg logo.jpg <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>div+css长...
js表白代码
共勉
06-04 9076
主要使用了js的函数调用，对于小白来讲，可以在桌面新建一个文本文档，再将下面的代码复制粘贴后保存，将后缀名txt改成html双击运行即可 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>LOVE YOU</title> ...
HTML给图片加上超链接
共勉
12-14 4066
如何实现按一下图片实现页面跳转，其实很简单，只需要在< img >标签外面加上a标签就行了 代码如下： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>1111</title> </head> <body>...
在a标签实现跳转的时候，给其加上延时
共勉
01-02 3741
给a标签实现延时跳转。 再3秒钟后实现跳转，跳转到我的博客 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <a href="#" onClick="delay...
CSS3实现3D立方体旋转效果详解
"本教程介绍了如何使用HTML5和CSS3创建3D立方体旋转效果，主要涉及CSS3的3D变换特性，包括perspective、translateZ、preserve-3d以及各种旋转、位移和缩放函数。通过学习，读者可以掌握构建3D场景的基础知识，实现...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Modify_QmQ

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值