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卡片折叠动画,效果都 ...
随机推荐
- [开源地址] 放弃Flink，.NET5.0开发CSharpFlink，简要设计、部署及二次开发说明。
github地址:https://github.com/wxzz/CSharpFlinkgitee地址:https://gitee.com/wxzz/CSharpFlink 1 概述及背景 我们有一个 ...
- osd磁盘空间足够无法写入数据的分析与解决
前言 这个问题的来源是ceph社区里面一个群友的环境出现在85%左右的时候,启动osd报错,然后在本地文件系统当中进行touch文件的时候也是报错,df -i查询inode也是没用多少,使用的也是in ...
- java.lang.IllegalStateException: Duplicate key 20
这个我在公司遇到的一个问题.原因:使用Map<String, String> RelationMap = relation.stream().collect(Collectors.toMa ...
- Linux上Mysql数据库 用户权限控制
Linux安装mysql 点我直达 Mysql限制root用户ip地址登录 修改mysql库里边的user表: update mysql.user set host='localhost' where ...
- c++11-17 模板核心知识（五）—— 理解模板参数推导规则
Case 1 : ParamType是一个指针或者引用,但不是universal reference T& const T& T* Case 2 : ParamType是Univers ...
- Redis未授权访问漏洞复现与利用
漏洞简介 Redis默认情况下,会绑定在0.0.0.0:6379,如果没有进行采用相关的策略,比如添加防火墙规则避免其他非信任来源ip访问等,这样将会将Redis服务暴露到公网上,如果在没有设置密码认 ...
- linux学习笔记全-如何学习linux？
简介 今天整理文件整理出了好多年前学习linux的笔记 就整理下发布在博客上怕文件形式会误删. linux入门基础对于新手而言不推荐看书!!不推荐看书!!(大牛跳过)先看视频看linuxcast的视频 ...
- iMindMap思维导图中可以插入哪些附件？
iMindMap(Windows系统)不仅拥有灵活的排版功能,而且还允许用户插入多种附件,丰富思维导图的内容.用户可以为思维导图添加图片.网址.录音等文件,让导图更显生动性.实用性. 将图片.录音等文 ...
- 手把手为大家演示fat32转ntfs操作过程，一看就会
fat32和ntfs是两种我们较为常见的u盘或者硬盘格式.它们都有着各自的特点,但是相比之下,使用ntfs文件格式我们可以做出很多fat32不能实现的功能.在日常生活中,我们会面临到需要把fat32转 ...
- Yali 19 - 8 - 6 test T2 猪国(pig) 题解
T2 猪国 题⽬描述 猪国是⼀个由 \(n\) 个城市组成的国家. 国王意识到了"要致富,先修路"这句话的重要性,它决定⼤规模修路.不巧的是,猪国的 猪们不太会⼯程,于是只能请隔壁 ...