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卡片折叠动画,效果都 ...
随机推荐
- vite 搭建Vue3.0项目
1.全局安装vite:npm install create-vite-app -g 2.创建项目:npx create-vite-app project-name 3.cd project-name ...
- 睿象云：为什么 Zabbix 告警如此火热？
每当我们谈及监控工具的时候,Zabbix 总是最惹人瞩目的那一个.如同清晨荷叶上的剔透露珠,卓尔不凡:如同巷子末头的百年酒香,让人倾心.我们都知道 Zabbix 是监控工具里当仁不让的龙头大哥,却没几 ...
- makefile 函数
1. findstring $(findstring <find>, <in>) 从 in 中查找 find ,如果找到则返回find,否则返回空 str1=1111 str2 ...
- 图解 Spring 循环依赖，写得太好了！
Spring如何解决的循环依赖,是近两年流行起来的一道Java面试题. 其实笔者本人对这类框架源码题还是持一定的怀疑态度的. 如果笔者作为面试官,可能会问一些诸如"如果注入的属性为null, ...
- HTTP 报文格式简介
HTTP(HyperTextTransferProtocol)是超文本传输协议的缩写,它用于传送 WWW 方式的数据,关于 HTTP 协议的详细内容请参考 RFC2616.HTTP 协议采用了请求/响 ...
- java中对于浮点型数据操作
java的基本数据类型-浮点型:单精度(float)和双精度(double). float:单精度浮点数在机内占4个字节.有效数字8位.表示范围:-3.40E+38 ~ +3.40E+38; doub ...
- guitar pro系列教程（十三）：Guitar Pro教程之打谱使用技巧
前面我们有讲过关于{cms_selflink page='index' text='Guitar Pro'}在声音方面的一些使用技巧,Guitar Pro在打谱,试听,伴奏方面对于刚学吉他作谱的朋友们 ...
- Ubuntu16.04配置静态ip
1.安装好ubuntu16.04虚拟机之后,首先按照下图的步骤进行: 首先需要打开虚拟网络编辑器,点击VMnet8的虚拟网卡,如果没有这个网卡,只需在编辑虚拟机设置里面将网络适配器类型改为NAT模式, ...
- CSP-SJX2019 解题报告
T1 日期 日高于 \(31\) 或等于 \(00\) 的要修改 \(1\) 次. 月高于 \(12\) 或等于 \(00\) 的要修改 \(1\) 次. 月等于 \(02\) 且日大于 \(28\) ...
- JavaSE 学习笔记01丨开发前言与环境搭建、基础语法
本蒟蒻学习过C/C++的语法,故在学习Java的过程中,会关注于C++与Java的区别.开发前言部分,看了苏星河教程中的操作步骤.而后,主要阅读了<Java核心技术 卷1 基础知识>(第8 ...