正方体旋转demo
接着上一篇博客的内容顺藤摸瓜往下想，既然stage有景深这个概念，可以表达3D场景，那么这个stage就可以呈现立体几何咯，于是自己写了个Cubic Demo
一个正方体有6个面，我们把一个正方体平铺开来就是一个十字的形状，然后变换每一面的角度把正方体“折叠”起来！
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
<title>Cube</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
} li{
list-style: none;
} .wrapper{
width:200px;
height: 200px;
border: 1px solid #f60;
margin: 0 auto;
padding: 100px;
margin-top: 100px;
-webkit-perspective:800px;
}
.cube{
width: 200px;
height: 200px;
position: relative;
-webkit-transform-style:preserve-3d;
transition:1s all; }
.cube li{
width: 200px;
height: 200px;
position: absolute;
text-align: center;
line-height: 200px;
color: #fff;
font-size: 30px;
}
.cube li:nth-of-type(1){
background: red;
top: -200px;
left: 0;
-webkit-transform-origin: bottom;
-webkit-transform: translateZ(100px) rotateX(90deg);
}
.cube li:nth-of-type(2){
background: green;
top: 0;
left: -200px;
-webkit-transform-origin: right;
-webkit-transform: translateZ(100px) rotateY(-90deg);
}
.cube li:nth-of-type(3){
background: blue;
top: 0;
left: 0;
-webkit-transform: translateZ(100px);
}
.cube li:nth-of-type(4){
background: yellow;
top: 0;
left: 200px;
-webkit-transform-origin: left;
-webkit-transform: translateZ(100px) rotateY(90deg);
}
.cube li:nth-of-type(5){
background: purple;
top: 200px;
left: 0;
-webkit-transform-origin: top;
-webkit-transform: translateZ(100px) rotateX(-90deg);
}
.cube li:nth-of-type(6){
background: orange;
top: 0;
left: 0;
-webkit-transform: translateZ(-100px) rotateX(180deg);
} .wrapper:hover .cube{
-webkit-transform:rotateX(180deg);
}
</style>
</head>
<body>
<div class="wrapper">
<ul class="cube">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
</ul>
</div>
</body>
</html>
也可以把另外两个侧面去掉，只留4个面。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
<title>Cube2</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
} li{
list-style: none;
} .wrapper{
width:200px;
height: 200px;
border: 1px solid #f60;
margin: 0 auto;
padding: 100px;
margin-top: 100px;
-webkit-perspective:800px;
}
.cube{
width: 200px;
height: 200px;
position: relative;
-webkit-transform-style:preserve-3d;
transition:1s all;
-webkit-transform:translateZ(-100px) rotate(0deg);
}
.cube li{
width: 200px;
height: 200px;
position: absolute;
text-align: center;
line-height: 200px;
color: #fff;
font-size: 30px;
}
.cube li:nth-of-type(1){
background: red;
-webkit-transform:translateZ(100px);
}
.cube li:nth-of-type(2){
background: green;
-webkit-transform-origin:top;
-webkit-transform:translateZ(-100px) rotateX(90deg);
}
.cube li:nth-of-type(3){
background: blue;
-webkit-transform:translateZ(-100px) rotateX(180deg);
}
.cube li:nth-of-type(4){
background: yellow;
-webkit-transform-origin:bottom;
-webkit-transform:translateZ(-100px) rotateX(-90deg);
} .wrapper:hover .cube{
-webkit-transform: translateZ(-100px) rotateX(270deg);
}
</style>
</head>
<body>
<div class="wrapper">
<ul class="cube">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</div>
</body>
</html>
正方体旋转demo的更多相关文章
- CSS实现正方体旋转
代码如下: <!DOCTYPE html><html lang="en"><head> <meta charset="UT ...
- canves 图片旋转 demo
<!DOCTYPE htmls> <html> <head> <title></title> <style> </styl ...
- css3 正方体旋转
<div class="contain"> <div class="box"> <div class="face one ...
- HTML5 纯CSS3实现正方体旋转3D效果
实现效果: 实现代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> & ...
- 图片旋转+剪裁js插件(兼容各浏览器) « 张鑫旭-鑫空间-鑫生活
图片旋转+剪裁js插件(兼容各浏览器) « 张鑫旭-鑫空间-鑫生活 图片旋转+剪裁js插件(兼容各浏览器) by zhangxinxu from http://www.zhangxinxu.com 本 ...
- 纯css耍个透明正方体转一转
效果 效果图如下 实现思路 定义一个最外层的容器,用来控制显示的位置 定义一个父容器,用来设置元素被查看位置的视图,这里使用到CSS3的perspective 属性 定义子容器,设置为相对定位,利 ...
- 【自己给自己题目做】：如何在Canvas上实现魔方效果
最终demo -> 3d魔方 体验方法: 浮动鼠标找到合适的位置,按空格键暂停 选择要翻转的3*3模块,找到相邻两个正方体,鼠标点击第一个正方体,并且一直保持鼠标按下的状态直到移到第二个正方体后 ...
- Canvas之蛋疼的正方体绘制体验
事情的起因 之前写了篇谈谈文字图片粒子化 I,并且写了个简单的demo -> 粒子化.正当我在为写 谈谈文字图片粒子化II 准备demo时,突然想到能不能用正方体代替demo中的球体粒子.我不禁 ...
- 【自己给自己题目做】：如何用裸的 Canvas 实现魔方效果
最终demo -> 3d魔方 体验方法: 浮动鼠标找到合适的位置,按空格键暂停 选择要翻转的3*3模块,找到相邻两个正方体,鼠标点击第一个正方体,并且一直保持鼠标按下的状态直到移到第二个正方体后 ...
随机推荐
- Sqlite，libevent，openssl，mosquito交叉编译
一.设置交叉编译环境 在makefile所在目录(或源代码根目录)打开终端. 在终端中设置交叉编译所需的临时环境变量(也可写到配置文件中设置为全局环境变量),其中交叉编译工具链的名称和目录需要根据实际 ...
- GS使用HTTPS登录的设置过程
1. Windows 增加角色服务 服务器配置管理器, 添加角色服务 增加角色功能里面有: 证书颁发机构 证书颁发机构 web注册 2. AD CS配置 主要是next操作 独立ca 根证书 等 3. ...
- pandas 级联 concat append
连接的一个有用的快捷方式是在Series和DataFrame实例的append方法.这些方法实际上早于concat()方法. 它们沿axis=0连接 #encoding:utf8 import pan ...
- awk、sed、grep三大shell文本处理工具之grep的应用
1.基本格式grep pattern [file...](1)grep 搜索字符串 [filename](2)grep 正则表达式 [filename]在文件中搜索所有 pattern 出现的位置, ...
- CentOS_7 网络配置（临）
https://www.cnblogs.com/kouryoushine/p/8011978.html 先转载一个,找个时间详细写一下
- C/C++ 各种进制的表示方法/ 进制前缀
C/C++ 各种进制的表示方法/ 进制前缀 来源 https://blog.csdn.net/qq_38282836/article/details/81784112 在C/C++ 中天然的支持除10 ...
- 【转】用宏定义代替printf函数
问题提出 有时候我们想用宏定义来决定是编译debug版本的代码还是release的代码,dubug版本的代码会通过printf打印调试信息,release版本的代码则不会.我们总不能对每一条print ...
- [poj1275][Cashier Employment]
poj1275 题目大意: 每天有24小时,每个小时需要一定的人.有m个人每个人会有一个开始工作的时间,每个人会工作8小时,问至少需要多少人才能完成任务.如果这m个人也不能完成任务就输出"N ...
- asp(utf-8) set cookie 用 javascript 读cookie发现一个问题
asp: <%setCookie("user_id","test")%> //传一个cookie ,名: user_id 值:test java ...
- MQ与webservice的区别，MQ的区别
Webservice 和MQ(MessageQueue)都是解决跨平台通信的常用手段,两者有哪些区别呢? 个人认为最本质的区别在于 Webservice近乎实时通信,而MQ却通常是延时通信. 什么意思 ...