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卡片折叠动画,效果都 ...
随机推荐
- 极客mysql38
InnoDB 引擎把数据放在主键索引上,其他索引上保存的是主键 id.这种方式,我们称之为索引组织表(Index Organizied Table). 而 Memory 引擎采用的是把数据单独存放,索 ...
- gdb调试入门（上）
一.什么是gdb:gdb是GNU debugger的缩写,是编程调试工具二.gdb功能:1.启动程序,可根据用户要求随心所欲的运行程序(比如带参数)2.可让被调试的程序在用户指定的调试的断点处停住3. ...
- select的限制
/*一.select实现并发服务器并发的两点限制 1.一个进能够打开的最大文件描述符限制.可以通过两种方式修改 ulimit -n :获取最大文件描述符个数 ulimit -n 2048:修改为204 ...
- 剑指offer刷题（Tree）
开篇 二刷剑指offer了,本来用Tyora记的笔记,发现字数到四万了就变得好卡o(╥﹏╥)o,刚好开始写博客,就转过来吧,记下来子自己看.不废话,开刷... JZ26. 树的子结构 输入两棵二叉树A ...
- oracle的三种连接方式
1.通过sid jdbc:oracle:thin:@host:port:SID Example: jdbc:oracle:thin:@localhost:1521:sid_test 2.通过servi ...
- mimikatz使用
mimikatz使用 需要用管理员权限打开 privilege::debug sekurlsa::logonpasswords 已测试系统 Windows Server 2008 R2 Datacen ...
- day02-业务服务监控
提供大量第三方工具,可以开发企业级服务监控平台,本章涉及文件与目录差异对比.HTTP质量监控.邮件告警等内容一.文件内容差异比对1.示例1 d = difflib.Differ() diff = d. ...
- Java 中常见的细粒度锁实现
上篇文章大致说了下 ReentrantLock 类的使用,对 ReentrantLock 类有了初步的认识之后让我们一起来看下基于 ReentrantLock 的几种细粒度锁实现. 这里我们还是接着用 ...
- 通过Folx的排序功能来设置下载任务的优先级
当我们使用Folx进行多任务下载时,突然遇到要下载一个紧急文件的情况,该如何让这个紧急文件的下载任务排在优先的位置?当然,用户也可以先暂停所有的下载任务,仅开启紧急文件的下载任务. 但这种方式需要用户 ...
- 在FL Studio中如何制作和优化你的人声和弦（Vocal Chords）
人声和弦在Future Bass.Melodic Dubstep等类型的电子音乐中被常用.与一般的和弦相同,其主要起到为主旋律做铺垫的效果,但是人声和弦加入了人声的因素,可以使得和弦更有趣,更有电子音 ...