实现效果：

实现代码：

<!DOCTYPE html>

<html>

	<head>

		<meta charset="UTF-8">

		<title></title>

		<style type="text/css">

			#aa{

				margin: 100px auto;

				width: 200px;

				height: 200px;

				transform-style: preserve-3d;

				position: relative;

				transform: rotateX(-15deg) rotateY(45deg);

				animation: name 6s linear 100ms infinite;

			}

			.bb{

				position: absolute;

				width: 100px;

				height: 100px;

				left: 0;

				right: 0;

				background-color: rgba(232,222,45,0.6);

			}

			.qian{

				transform: translateZ(50px);

				background-color: rgba(23,22,4,0.6);

			}

			.hou{

				transform: translateZ(-50px);

				background-color: rgba(23,122,56,0.6);

			}

			.zuo{

				transform: rotateY(270deg) translateZ(-50px);

				background-color: rgba(223,122,74,0.6);

			}

			.you{

				transform: rotateY(270deg) translateZ(50px);

				background-color: rgba(13,22,254,0.6);

			}

			.shang{

				transform: rotateX(270deg) translateZ(-50px);

				background-color: rgba(223,12,144,0.9);

			}

			.xia{

				transform: rotateX(270deg) translateZ(50px);

				background-color: rgba(23,252,144,0.6);

			}

			@keyframes name{

				from{ transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);}

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

			}

		</style>

	</head>

	<body>

		<div id="aa">

			<div class="bb  qian"></div>

			<div class="bb  hou"></div>

			<div class="bb  zuo"></div>

			<div class="bb  you"></div>

			<div class="bb  shang"></div>

			<div class="bb  xia"></div>

		</div>

	</body>

</html>

HTML5 纯CSS3实现正方体旋转3D效果的更多相关文章

  1. 一款纯css3实现的图片3D翻转幻灯片

    之前介绍了好多款网页幻灯片,今天要给大家再带来一款纯css3实现的图片3D翻转幻灯片.这款幻灯片图片轮播采用了3D翻转的形式,效果非常不错.一起看下效果图: 在线预览   源码下载 实现的代码. ht ...

  2. 纯CSS3实现的动感菜单效果

    1. [代码] 纯CSS3实现的动感菜单效果 <!DOCTYPE html><head><meta http-equiv="Content-Type" ...

  3. 纯CSS3悬停图标旋转导航动画代码

    分享一款纯CSS3悬停图标旋转导航动画代码.这是一款鼠标移到图标上动画旋转显示导航菜单.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div id="x_con ...

  4. Long Shadows Generate是一款在线使用纯CSS3实现长阴影的效果，一款强大的扁平化长投影制造器。

    Long Shadows Generate是一款在线使用纯CSS3实现长阴影的效果,一款强大的扁平化长投影制造器. Long Shadows Generate 彩蛋爆料直击现场 Long Shadow ...

  5. 9种纯CSS3人物信息卡片动态展示效果

    <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8&quo ...

  6. 纯CSS3实现常见多种相册效果

    本文包含 1.CSS3中2D转换和3D转换的介绍. 2.在相册中的应用实例. CSS3中的转换效果和动画效果十分强大好用,可以实现一些常见的动态效果. 如此一来,CSS3便可以代替许多jQuery的功 ...

  7. 纯Css3手工打造网页图片效果

    .rotate-demo { width: 220px; height: 220px; margin: 0 auto; background: no-repeat url("http://i ...

  8. 纯CSS3实现轮播切换效果

    使用纯css3实现与轮播器一样的功能. HTML代码: <div class="slide-container"> <input type="radio ...

  9. 纯CSS3实现一个旋转的3D立方体盒子

    简单介绍 上网易前端微专业课程,里面有一个课外作业是实现一个3D旋转立方体.花了点时间做了下.还有点意思.写个简单教程.供大家学习. 先放上终于要实现的效果 注:代码在chrome 43.0.2357 ...

随机推荐

  1. 【STM32】使用SDIO进行SD卡读写，包含文件管理FatFs（五）-文件管理初步介绍

    其他链接 [STM32]使用SDIO进行SD卡读写,包含文件管理FatFs(一)-初步认识SD卡 [STM32]使用SDIO进行SD卡读写,包含文件管理FatFs(二)-了解SD总线,命令的相关介绍 ...

  2. C++ 类型转换（C风格的强制转换）：

    转https://www.cnblogs.com/Allen-rg/p/6999360.html C++ 类型转换(C风格的强制转换): 在C++基本的数据类型中,可以分为四类:整型,浮点型,字符型, ...

  3. mysqldump冷备份

    数据库备份的重要性 提高系统的高可用性和灾难可恢复性,在数据库系统崩溃时,没有数据备份就没法找到数据. 使用数据库备份还原数据库,是数据库崩溃时提供数据恢复最小代价的最优方案. 没有数据库就没有一切, ...

  4. Linux_spool命令

    spool的作用是什么? spool的作用可以用一句话来描述:在sqlplus中用来保存或打印查询结果. 参数指南 对于SPOOL数据的SQL,最好要自己定义格式,以方便程序直接导入,SQL语句如: ...

  5. ligerUI 关闭父弹窗JS报错问题 解决方法

    1:调用父窗口某一个文件框,获取焦点, parent.window.document.getElementById("roleName").focus(); 2:关闭父窗口pare ...

  6. 【编程思想】【设计模式】【结构模式Structural】代理模式Proxy

    Python版 https://github.com/faif/python-patterns/blob/master/structural/proxy.py #!/usr/bin/env pytho ...

  7. Spring Boot简单操作

    目录 一.自定义异常页面 二.单元测试 ​三.多环境选择 四.读取主配置文件中的属性 五.读取List属性 一.自定义异常页面 对于404.405.500等异常状态,服务器会给出默认的异常页面,而这些 ...

  8. 【阿菜做实践】利用ganache-cli本地fork以太坊主链分叉

    前言 Fork主网意思是模拟具有与主网相同的状态的网络,但它将作为本地开发网络工作. 这样你就可以与部署的协议进行交互,并在本地测试复杂的交互.不用担心分叉主网作为测试链会占很多内存.这些方法都不会将 ...

  9. Nginx LOCATOIN块配置

    1 匹配模式优先级 location = /uri =开头表示精确匹配,只有完全匹配上才能生效. location ^~ /uri ^~ 开头对URL路径进行前缀匹配,并且在正则之前.无正则普通匹配( ...

  10. [BUUCTF]PWN——bjdctf_2020_router

    bjdctf_2020_router 附件 步骤: 例行检查,64位程序,开启了NX保护 本地试运行一下程序,看看大概的情况 会让我们选择,选择4.root,没什么用,但是注意了,这边选1会执行pin ...