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 c 线程间同步（通信）的几种方法--互斥锁，条件变量，信号量，读写锁
Linux下提供了多种方式来处理线程同步,最常用的是互斥锁.条件变量.信号量和读写锁. 下面是思维导图: 一.互斥锁(mutex) 锁机制是同一时刻只允许一个线程执行一个关键部分的代码. 1 . ...
- http服务器文件名大小写忽略
问题 文件从windows里面放到nginx里面去的时候,文件在windows下面是大小写忽略,也就是不论大小写都可以匹配的,而到linux下面的时候,因为linux是区分大小写的,也就是会出现无法忽 ...
- linux 更改mysql 数据存储目录
https://www.cnblogs.com/hellangels333/p/8376177.html 参考位博主的文章,稍做改动 1.检查mysql数据库存放目录 mysql -u root - ...
- 死磕以太坊源码分析之Kademlia算法
死磕以太坊源码分析之Kademlia算法 KAD 算法概述 Kademlia是一种点对点分布式哈希表(DHT),它在容易出错的环境中也具有可证明的一致性和性能.使用一种基于异或指标的拓扑结构来路由查询 ...
- CENTOS 6 配置 yum 安装 nginx
摘要: 本文介绍如何用yum源安装Nginx,比编译安装简单很多 1.在/etc/yum.repos.d/目录下创建一个源配置文件nginx.repo: cd /etc/yum.repos.d/ vi ...
- 轻松将CAD文件转为加密的PDF文件
对于从事设计相关工作的朋友来说,CAD肯定再熟悉不过了.一些有特殊要求的CAD文件,需要将其转换成为PDF文件以方便保存.传输.打印,同时还得保证设计图稿的安全性,所以将CAD文件直接转为加密的PDF ...
- 免费在线使用Ayoa：让思维导图更简单
在学习和工作中,我们都会遇到需要使用思维导图的情况,导图可以很好地帮助我们处理工作,完成记录和分享,是一个非常便捷的工具.今天小编就想和大家分享一款非常简单好用的思维导图软件,Ayoa. 之所以要将它 ...
- ABBYY FineReader文档对比实例讲解
ABBYY FineReader企业版与标准版有一个重大的区别,就是企业版有对比文档的功能,今天通过下面的文档对比实例,来向大家展示一下OCR文字识别工具ABBYY FineReader的使用技巧. ...
- 缓存模式（Cache Aside、Read Through、Write Through、Write Behind）
目录 概览 Cache-Aside 读操作 更新操作 缓存失效 缓存更新 Read-Through Write-Through Write-Behind 总结 参考 概览 缓存是一个有着更快的查询速度 ...
- 一看就懂的：MySQL数据页以及页分裂机制
文章公号 首发!连载中~ 欢迎各位大佬关注, 回复:"抽奖" 还可参加抽活动 文末有二维码 一.知识回顾 回顾一下之前和大家分享的知识点 看了前面的文章,想必你肯定了解了什么是Bu ...