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卡片折叠动画,效果都 ...

随机推荐

没找到Wkhtmltopdf，报表会被显示为html
windows10 odoo 打印报表时提示没找到Wkhtmltopdf,报表会被显示为html 现象原因没有安装Wkhtmltopdf,没有配置环境变量,odoo在电脑系统中找不到Wkhtml ...
Vegas的软对比具体如何设置
软对比是Vegas中比较常用的一个视频特效,通过这一特效可以让视频画面更加柔和.而对于新手用户来说,软对比显得有些陌生,不知道该如何使用. 本集主要为大家介绍:sony vegas的软对比. 在视频制 ...
利用css3实现照片列表展开小demo
效果如下: 其实实现起来很简单,就是控制宽高的变化,然后给他加上transition 过度而已.觉得代码没什么难的地方,就不打注释了,如果哪里有不懂的话,可以直接评论呢. 直接上源码 html代码 ...
jenkins 中邮件发送
1.安装插件 jenkins中安装邮件插件,选择Email Extension 2.开启smtp服务,每个客户端的设置不一样,下图是qq邮箱,仅供参考 3.设置邮件服务 3.1系统设置 3.2 在任务 ...
永别了，Dota2！
永别了,Dota2 .输了游戏,我还有人生! 游戏中,总有那些喷子,自己玩的不好,经常说人家! 和大便打架,即使赢了,身上也非常臭! 所以对于这种人,敬而远之即可!不吵不闹,默默把锅扛起!赢了,就好说 ...
linux配置tomcat项目包
安装配置tomcat 操作系统: centos 7.1 使用模式:命令模式使用工具:xshell5 .xftp5 注意之前有配置过tomcat需要进行以下4个步骤 1.关闭网管服务输入命令: 进 ...
C语言讲义——内存管理
动态分配内存动态分配内存,在堆(heap)中分配. void *malloc(unsigned int num_bytes); 头文件 stdlib.h或malloc.h 向系统申请分配size个字 ...
C语言讲义——C语言的布尔类型
C89标准中没有定义布尔类型: C99中增加了_Bool类型.实际上是只能等于0或1的整数类型,凡是不为0的整数都被转变为1, C99还提供了一个头文件<stdbool.h>,该头文件提供 ...
那么多人学习C++，学习它有什么好处？学完以后能从事哪些岗位？
相信很多人接触编程都是源于大学期间的那堂C++语言程序编程,但是这门课却只告诉了你编程语言是什么,却没告诉你要怎么去熟练掌握编程.所以,不可避免的是许多人在毕业前夕才发现虽然学会了C++,但是好像却不 ...
C语言精华——内存管理，很多学校学习不到的知识~
在编写程序时,通常并不知道需要处理的数据量,或者难以评估所需处理数据量的变动程度.在这种情况下,要达到有效的资源利用--使用内存管理,必须在运行时动态地分配所需内存,并在使用完毕后尽早释放不需要的内存 ...

css3实现立体魔方效果

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

随机推荐

热门专题