<!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实现立体魔方效果的更多相关文章

  1. CSS3 3D环境实现立体 魔方效果代码

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

  2. CSS3文字立体效果

    <!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8& ...

  3. 使用CSS3制作立体效果的导航菜单

    效果如下: 也可以点击网址查看效果:http://keleyi.com/keleyi/phtml/html5/12.htm 请使用支持CSS3的浏览器访问本页面,获得更好效果. 源代码: <st ...

  4. CSS3制作立体导航

    <ul class="nav"> <li><a href="">首页</a></li> <li ...

  5. CSS3,transform3D立体可拖拽正方体实现原理

    ---恢复内容开始--- 今天咱们来说一下,CSS中的3D效果 .如果你把transform真的掌握的和纯熟的话,就可以直接通过CSS做出很多很炫酷的效果,甚至.轮播图和选项卡都可以通过CSS来做,咱 ...

  6. CSS3 3D立体柜子实现

    1. [图片] 20140811233657.jpg 2. [图片] 120140811233846.jpg ​3. [代码][CSS]代码 body {      background-color: ...

  7. css3立体旋转菜单

    css3立体旋转菜单,css3,3D,立体旋转,立体菜单,菜单导航,css3立体旋转菜单是一款纯css3实现的三维立体旋转导航菜单. 源码下载页:http://www.huiyi8.com/sc/71 ...

  8. 14款让前端开发者心动的jQuery/CSS3插件及源码

    14款让前端开发者心动的jQuery/CSS3插件及源码,一起来看看. 1.jQuery左右滚动banner代码! DEMO演示    /    源码下载 2.jQuery QQ表情插件qqFace ...

  9. 9款精美别致的CSS3菜单和按钮

    1.超具立体感的CSS3 3D菜单 菜单项带小图标 记得之前向大家分享过不少CSS3 3D菜单,比如CSS3 3D动画菜单 3D立方体菜单项和HTML5/CSS3自定义下拉框 3D卡片折叠动画,效果都 ...

随机推荐

  1. [原题复现][CISCN 2019 初赛]WEB-Love Math(无参数RCE)[未完结]

    简介  原题复现:  考察知识点:无参数命令执行  线上平台:https://buuoj.cn(北京联合大学公开的CTF平台) 榆林学院内可使用信安协会内部的CTF训练平台找到此题 源码审计 代码 1 ...

  2. 转换文件格式遭遇 FileNotFoundError:[WinError 2]系统找不到指定的文件

    重启试试

  3. Druid配置和初始化参数 转发地址图片有

    配置数据源 1.添加上 Druid 数据源依赖. <!-- https://mvnrepository.com/artifact/com.alibaba/druid --> <dep ...

  4. 攻克弹唱第八课（吉他演奏的律动与funk音乐）

    在本期文章中,笔者将为通过Guitar Pro 7吉他打谱软件与大家分享一下吉他律动与funk音乐的经验. 想必正在看这篇文章的进阶者和高手,都会考虑这样一个问题.我辛辛苦苦练习的大段solo和指弹曲 ...

  5. 如何用pdfFactory新建打印机并设置属性

    今天我们来讲一讲,在pdfFactory中如何去修改PDF文件打印页面的页边距.页面大小.页面清晰度等属性参数. pdfFactory是一款Windows平台上的虚拟打印机,在没有打印机可以安装的情况 ...

  6. docker和k8s的概念-IaaS、PaaS、SaaS 的区别

    docker和k8s 参考: 什么是Docker? Kubernetes概述 openstack,docker,mesos,k8s什么关系? IaaS.PaaS.SaaS的概念 SaaS:软件服务,S ...

  7. python定时执行详解

    知识点 1. sched模块,准确的说,它是一个调度(延时处理机制),每次想要定时执行某任务都必须写入一个调度. (1)生成调度器:s = sched.scheduler(time.time,time ...

  8. Java基础教程——Object类

    Object类 Object类是Java所有类类型的父类(或者说祖先类更合适) <Thinking in Java(Java编程思想)>的第一章名字就叫"everything i ...

  9. 语法解析器续：case..when..语法解析计算

    之前写过一篇博客,是关于如何解析类似sql之类的解析器实现参考:https://www.cnblogs.com/yougewe/p/13774289.html 之前的解析器,更多的是是做语言的翻译转换 ...

  10. LeetCode 039 Combination Sum

    题目要求:Combination Sum Given a set of candidate numbers (C) and a target number (T), find all unique c ...