css3实现立体魔方效果

<!DOCTYPE html>

<html>

	<head>

		<meta charset="utf-8">

		<title>css3魔方</title>

		<style>

			div.box {

				width: 300px;

				height: 300px;

				margin: 100px auto;

				position: relative;

				transform-style: preserve-3d;

				animation: rotate 5s linear infinite alternate;

			}

			div.box:hover{

				animation-play-state: paused;

			}

			@keyframes rotate{

				0%{

					transform: rotateX(0) rotateY(0) rotateZ(0);

				}

				50%{

					transform: rotateX(30deg) rotateY(34deg) rotateZ(50deg);

				}

				100%{

					transform: rotateX(60deg) rotateY(90deg) rotateZ(135deg);

				}

			}

			div.face {

				width: 300px;

				height: 300px;

				position: absolute;

				display: flex;

				flex-wrap: wrap;

				justify-content: space-between;

				align-content: space-between;

			}

			div.item {

				width: 90px;

				height: 90px;

				border-radius: 10px;

				text-align: center;

				line-height: 90px;

			}

			.top .item {

				background: red;

			}

			.top {

				transform: rotateX(-90deg) translateZ(150px);

			}

			.bottom .item {

				background: skyblue;

			}

			.bottom {

				transform: rotateX(90deg) translateZ(150px);

			}

			.left .item {

				background: chocolate;

			}

			.left {

				transform: rotateY(90deg) translateZ(150px);

			}

			.right .item {

				background: blue;

			}

			.right {

				transform: rotateY(-90deg) translateZ(150px);

			}

			.front .item {

				background: deepskyblue;

			}

			.front {

				transform: translateZ(150px)

			}

			.back .item {

				background: yellowgreen;

			}

			.back {

				transform: translateZ(-150px) rotateY(-180deg);

			}

		</style>

	</head>

	<body>

		<div class="box">

			<div class="face front">

				<div class="item">1</div>

				<div class="item">2</div>

				<div class="item">3</div>

				<div class="item">4</div>

				<div class="item">5</div>

				<div class="item">6</div>

				<div class="item">7</div>

				<div class="item">8</div>

				<div class="item">9</div>

			</div>

			<div class="face back">

				<div class="item">1</div>

				<div class="item">2</div>

				<div class="item">3</div>

				<div class="item">4</div>

				<div class="item">5</div>

				<div class="item">6</div>

				<div class="item">7</div>

				<div class="item">8</div>

				<div class="item">9</div>

			</div>

			<div class="face left">

				<div class="item">1</div>

				<div class="item">2</div>

				<div class="item">3</div>

				<div class="item">4</div>

				<div class="item">5</div>

				<div class="item">6</div>

				<div class="item">7</div>

				<div class="item">8</div>

				<div class="item">9</div>

			</div>

			<div class="face right">

				<div class="item">1</div>

				<div class="item">2</div>

				<div class="item">3</div>

				<div class="item">4</div>

				<div class="item">5</div>

				<div class="item">6</div>

				<div class="item">7</div>

				<div class="item">8</div>

				<div class="item">9</div>

			</div>

			<div class="face top">

				<div class="item">1</div>

				<div class="item">2</div>

				<div class="item">3</div>

				<div class="item">4</div>

				<div class="item">5</div>

				<div class="item">6</div>

				<div class="item">7</div>

				<div class="item">8</div>

				<div class="item">9</div>

			</div>

			<div class="face bottom">

				<div class="item">1</div>

				<div class="item">2</div>

				<div class="item">3</div>

				<div class="item">4</div>

				<div class="item">5</div>

				<div class="item">6</div>

				<div class="item">7</div>

				<div class="item">8</div>

				<div class="item">9</div>

			</div>

		</div>

	</body>

</html>

css3实现立体魔方效果的更多相关文章

CSS3 3D环境实现立体魔方效果代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
CSS3文字立体效果
<!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8& ...
使用CSS3制作立体效果的导航菜单
效果如下: 也可以点击网址查看效果:http://keleyi.com/keleyi/phtml/html5/12.htm 请使用支持CSS3的浏览器访问本页面,获得更好效果. 源代码: <st ...
CSS3制作立体导航
<ul class="nav"> <li><a href="">首页</a></li> <li ...
CSS3,transform3D立体可拖拽正方体实现原理
---恢复内容开始--- 今天咱们来说一下,CSS中的3D效果 .如果你把transform真的掌握的和纯熟的话,就可以直接通过CSS做出很多很炫酷的效果,甚至.轮播图和选项卡都可以通过CSS来做,咱 ...
CSS3 3D立体柜子实现
1. [图片] 20140811233657.jpg 2. [图片] 120140811233846.jpg 3. [代码][CSS]代码 body { background-color: ...
css3立体旋转菜单
css3立体旋转菜单,css3,3D,立体旋转,立体菜单,菜单导航,css3立体旋转菜单是一款纯css3实现的三维立体旋转导航菜单. 源码下载页:http://www.huiyi8.com/sc/71 ...
14款让前端开发者心动的jQuery/CSS3插件及源码
14款让前端开发者心动的jQuery/CSS3插件及源码,一起来看看. 1.jQuery左右滚动banner代码! DEMO演示 / 源码下载 2.jQuery QQ表情插件qqFace ...
9款精美别致的CSS3菜单和按钮
1.超具立体感的CSS3 3D菜单菜单项带小图标记得之前向大家分享过不少CSS3 3D菜单,比如CSS3 3D动画菜单 3D立方体菜单项和HTML5/CSS3自定义下拉框 3D卡片折叠动画,效果都 ...

随机推荐

Linux 8个有力的Awk内建变量
Awk 有几个非常强力的内置变量.通常来说,分为两种类型的内置变量: 第一种是定义的变量可以改变, 比如字段分隔(FS)与记录分隔(RS) 第二种是可以用来数据处理或者数据总结,比如记录数(NR)与字 ...
Java 内功修炼之数据结构与算法（二）
一.二叉树补充.多叉树 1.二叉树(非递归实现遍历) (1)前提前面一篇介绍了二叉树.顺序二叉树.线索二叉树.哈夫曼树等树结构. 可参考:https://www.cnblogs.com/l-y-h ...
采用“传统”方式获取当前HttpContext
我们知道"依赖注入"已经成为了.NET Core的基本编程模式,表示当前请求上下文的HttpContext可以通过注入的IHttpContextAccessor服务来提取.有时候我 ...
netfilter 的扩展功能
目前内核已经有filter 功能,但是往往实际运用中需要用到一些定制的filter 功能, 所以这个时候仅仅依靠现有的不能完成,于是就出现了conntrack的扩展功能, 最直接的就是tftp he ...
性能问题eg
线上问题 ./pidstat -w Linux 3.6.5-Broadcom Linux ((none)) 03/21/20 _armv7l_ (1 CPU) 15:04:17 UID PID csw ...
tomcat设置好环境变量，依然无法通过cmd startup命令启动
Windows环境下JDK安装与环境变量配置详细的图文教程 https://www.cnblogs.com/liuhongfeng/p/4177568.html Windows环境下maven 环 ...
Git本地仓库和远程仓库冲突解决
场景描述: 在本地创建了一个git repo,并且执行了,git init命令,创建了.gitignore文件,或者README.md文件: 在远程创建了一个git repo,创建时也初始化了.git ...
Docker学习—Swarm
前言: 前一篇<Docker学习-Machine>中对Machine 进行了学习,本篇继续学习Swarm,那么Swarm是什么呢,有什么用呢?接下来一步步了解. 一.什么是Docker-S ...
javascript——什么是解释型语言？
摘要:<JavaScript基础与案例开发详解>(张孝祥,徐明华)第2章JavaScript环境,本章力求让读者了解JavaScript的开发环境.运行环境,和开发中会遇见的一些问题,做好 ...
应用程序-特定权限设置并未向在应用程序容器不可用 SID (不可用)中运行的地址 LocalHost (使用 LRPC) 中的用户...的 COM 服务器应用程序的本地激活权限。此安全权限可以使用组件服务管理工具进行修改。
很久以前发现我们的业务服务器上出现一个System的系统严重错误,查找很久都没有找到解决办法,今日再次查看服务器发现报错更频繁,于是就搜集各种资料进行查找解决办法,终于找到了一个解决办法. 错误截图介 ...

css3实现立体魔方效果

css3实现立体魔方效果的更多相关文章

随机推荐

热门专题