正方体旋转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模块,找到相邻两个正方体,鼠标点击第一个正方体,并且一直保持鼠标按下的状态直到移到第二个正方体后 ...
随机推荐
- 数据类型+内置方法 python学习第六天
元组 用途:不可变的列表,能存多个值,但多个值只有取的需求而没有改的需求. 定义方式:在()内用逗号分隔开多个元素,可以存放任意类型的值. names=(‘alex’,’blex’,’clex’) 强 ...
- Sql 重置自动增长列
Sql 重置自动增长列: dbcc checkident(表名, reseed, 0) 使用的情况,一般出现在主外键关联表,导致无法 truncate 只能delete的情况. 此时我们可能会需要重置 ...
- day 变量的赋值原理 变量的命名规则
print(3*4*5*6/2) #简单的计算输出 x=3 y=4 print("x乘以y=",x*y) #运行5分钟 = 12 print(x*y) #在运行5分钟 = 12 ' ...
- python numpy 数组拼接
我就写一下我遇到的,更多具体的请看Python之Numpy数组拼接,组合,连接 >>> aarray(［0, 1, 2], [3, 4, 5], [6, 7, ...
- MT【232】展开式中的系数
$(1+x+x^2+\cdots+x^{100})^3$展开式中$x^{150}$前的系数为_____ 解答:$(1+x+x^2+\cdots+x^{100})^3=(1-x^{101})^3\sum ...
- hdu5306 Gorgeous Sequence
hdu5306 Gorgeous Sequence 题目大意 给你一个序列,维护区间和,区间chkmin和区间最大值 数据范围 数据组数T,序列长度n,操作次数m $T = 100,\sum n ...
- Java新AIO/NIO2：AsynchronousServerSocketChannel和AsynchronousSocketChannel简单服务器-客户端
Java新AIO/NIO2:AsynchronousServerSocketChannel和AsynchronousSocketChannel简单服务器-客户端用AsynchronousServerS ...
- 利用Python攻破12306的最后一道防线
各位同学大家好,我是强子,好久没跟大家带来最新的技术文章了,最近有好几个同学问我12306自动抢票能否实现,我就趁这两天有时间用Python做了个12306自动抢票的项目,在这里我来带着大家一起来看看 ...
- 自学Linux Shell12.6-嵌套循环for命令
点击返回 自学Linux命令行与Shell脚本之路 12.6-嵌套循环for命令 嵌套循环就是在一个循环中还有一个循环. 内部循环在外部循环体中,在外部循环的每次执行过程中都会触发内部循环,直到内部循 ...
- 洛谷 P3299 [SDOI2013]保护出题人 解题报告
P3299 [SDOI2013]保护出题人 题目描述 出题人铭铭认为给SDOI2012出题太可怕了,因为总要被骂,于是他又给SDOI2013出题了. 参加SDOI2012的小朋友们释放出大量的僵尸,企 ...