html中3d哪个方向是x轴,详解用CSS绘制3D旋转立方体
CSS3D旋转立方体绝对是能充分代表这些年CSS发展新高度的典型案例。从一种只是简单的颜色和尺寸渲染的标记符,CSS现在已经变成了一种能够创造出复杂的、具有艺术感染力的视觉效果的编程语言。动画效果的生成变得非常的简单易行。 遗憾的是,目前网上的关于CSS立方体的制作教程都有些复杂,在立方体的基础上混合了其它视觉效果,所以,我决定写这篇文章,只涉及如何创造出基本的CSS立方体的讲解。这篇文章中使用的例子来自于CodePen上Mircea Georgescu的漂亮杰作。
观看演示
HTML
这个立方体首先是包裹在一个div里:
而立方体的每个面都用一个div元素表示。你可以想象出,我们将使用CSS将它们定位到正确的空间位置上。
CSS
我们一步一步的进行讲解。首先要注意的是包裹这个立方体的div元素,为了让它有立体效果,给它设置了CSS透视属性。
.wrap {
perspective: 800px;
perspective-origin: 50% 100px;
}
CSS透视是一个非常新颖的概念,MDN已经对其讲解的非常透彻,我就不再复述了。为了更好的理解透视,我建议你修改这个例子里的perspective属性,看看它是如何影响表现效果的。下面要说的是立方体div容器,立方体的所有面都放在里面:
.cube {
position: relative;
width: 200px;
transform-style: preserve-3d;
}
立方体边长是200px,使用relative定位方式,这样它的那些使用绝对定位的各个面都被限制在它里面。我们使用preserve-3d属性值来让它表现出3D特征,而不是平面效果。在我们给各个特定面制定CSS规则前,先制定一个所有面都共用的CSS规则:
.cube div {
position: absolute;
width: 200px;
height: 200px;
}
设置完所有面通用的定位方式和长宽值,我们现在开始编写让每个面发生变形的代码:
.back {
transform: translateZ(-100px) rotateY(180deg);
}
.right {
transform: rotateY(-270deg) translateX(100px);
transform-origin: top right;
}
.left {
transform: rotateY(270deg) translateX(-100px);
transform-origin: center left;
}
.top {
transform: rotateX(-90deg) translateY(-100px);
transform-origin: top center;
}
.bottom {
transform: rotateX(90deg) translateY(100px);
transform-origin: bottom center;
}
.front {
transform: translateZ(100px);
}
设定rotateY值使各个面旋转形成适当的角度。translateZ值的作用是调整在三维空间中立方体的各个面与观众的距离。这个translateY属性可能让人有些困惑,它的作用是让立方体的各个面移动到相应的位置从而拼凑出一个立方盒子。每个面都有各自的移动方向和距离,你可以修改这些值来看看它们是如何从叠摞平躺移动到相应位置变成一个立方体的各个面的。
观看演示
水平转动立方体
当然,这个静止不动的立方体显然不够吸引人,缺少一点生气,我们要让它动起来。下面的步骤就是让我这个宝贵的立方盒子旋转起来:
@keyframes spin {
from { transform: rotateY(0); }
to { transform: rotateY(360deg); }
}
.cube {
animation: spin 5s infinite linear;
}
你也许意外竟然会如此简单,不是吗?因为我们只需要让这个立方体容器div旋转,它就能带动起内部的各个面一起旋转。下面我们要让它垂直翻转和2D水平翻转。
垂直旋转立方体
让立方体垂直旋转只需要修改一下,让它沿着Y轴旋转就行了,不是吗?很不幸,不是这样的。因为这个立方体静止时是斜着对我们的,我们需要把它调整到直对着我们时才能旋转,所以要修改一下它的初始旋转角度:
@keyframes spin-vertical {
from { transform: rotateX(0); }
to { transform: rotateX(-360deg); }
}
.cube-wrap.vertical .cube {
margin: 0 auto; /* 居中 */
transform-origin: 0 100px;
animation: spin-vertical 5s infinite linear;
}
.cube-wrap.vertical .top {
transform: rotateX(-270deg) translateY(-100px);
}
.cube-wrap.vertical .back {
transform: translateZ(-100px) rotateX(180deg);
}
.cube-wrap.vertical .bottom {
transform: rotateX(-90deg) translateY(100px);
}
… 这就修改完了。
2D水平旋转
去掉立方体的3D视觉效果,让我们以水平角度观看这个立方体(没有上下两面的视觉辅助),只需要去掉最外层的div上的透视属性和透视原点值:
.wrap {
/* 去掉透视效果 */
perspective: none;
perspective-origin: 0 0;
}
现在我们就只能看到它的水平面了。
观看演示
CSS3D旋转立方体已经在网络上流行有一阵子了,但我希望这篇文章能让你更容易的学会制作它,给自己一个惊喜。如果在尝试自己制作是遇到困难,不要气馁——我也是费力很大牛劲才做出来的!我期望看到你做出的效果!
(英文:davidwalsh.)
html中3d哪个方向是x轴,详解用CSS绘制3D旋转立方体相关推荐
- [3D检测系列-PV-RCNN] PV-RCNN论文详解、PV-RCNN代码复现、包含官网PV-RCNN预训练权重及报错问题
[3D检测系列-PV-RCNN] PV-RCNN论文详解.PV-RCNN代码复现 一.论文详解 1.3D voxel CNN 2.体素到关键点场景编码 2.1.关键点抽样 2.2.体素抽象 3.VSA ...
- WPF中的形状Shape与几何图形Geometry详解
总目录 文章目录 总目录 一.Shape(形状) 1.Shape基本信息 2.Ellipse 1.案例 2.说明 3.Rectangle 1.案例 2.说明 4.Line 1.案例 2.说明 5.Po ...
- Python中Print()函数的用法___实例详解(二)(全,例多)
Python中Print()函数的用法___实例详解(二)(全,例多) 目录 十一.Print()小例子 十二.Print()中文输入显示乱码问题 十三.Print()写入文件 十四.print()在 ...
- PX4飞控中利用EKF估计姿态角代码详解
PX4飞控中利用EKF估计姿态角代码详解 PX4飞控中主要用EKF算法来估计飞行器三轴姿态角,具体c文件在px4\Firmware\src\modules\attitude_estimator_ekf ...
- linux 移动剪切命令,Linux中vi的复制命令的用法详解
在Linux系统中,使用VI编辑的时候经常用到的操作就是复制粘贴,那么下面由学习啦小编为大家整理了linux中vi的复制命令的用法详解的相关知识,希望对大家有帮助! Linux中vi的复制命令的用法详 ...
- P2P 中的 NAT 穿越(打洞)方案详解
P2P 中的 NAT 穿越(打洞)方案详解 转载自 : P2P 中的 NAT 穿越(打洞)方案详解 内容概述 P2P 即点对点通信,或称为对等联网,与传统的服务器客户端模式(如下图"P2P ...
- oracle中的exists 和 not exists 用法详解
from:http://blog.sina.com.cn/s/blog_601d1ce30100cyrb.html oracle中的exists 和 not exists 用法详解 (2009-05- ...
- R语言中如何计算C-Statistics?几种计算方法详解
R语言中如何计算C-Statistics?几种计算方法详解 目录 R语言中如何计算C-Statistics? #包导入 #数据加载编码
- python中的class怎么用_对python 中class与变量的使用方法详解
python中的变量定义是很灵活的,很容易搞混淆,特别是对于class的变量的定义,如何定义使用类里的变量是我们维护代码和保证代码稳定性的关键. #!/usr/bin/python #encoding ...
最新文章
- 图标尺寸规范_作为刚入门的UI设计师,你需要懂哪些设计规范?
- 分区硬盘Lvm 折腾小记
- JavaScript深入之执行上下文栈
- 2020年日历_2020年《故宫日历》发布 纪念紫禁城建成六百年
- C程序中main函数参数调用[个人学习简记]
- Linux执行source /etc/profile报错“:command not found”
- [PHP] - Laravel 5 的 Hello Wold
- 2021年度 Egon Balas 奖得主:达摩院印卧涛
- bat批处理文件的简单解密方法(乱码)
- Kotlin 常用API汇总
- 蓝牙技术谈之跳频技术(一)
- 【魔兽世界插件】魔兽世界插件实战笔记从入门到放弃的心理历程 第一节 lua框架的建立
- 微信小程序通过PHP控制云开发数据库的写入,读出,更新,删除
- 计算机硬盘分区win7,Win7电脑硬盘分区方法
- R实战:【股票分析】用quantmod在股票的K线上添加标记
- 智云通CRM:如何发现高附加值客户,让他们直接按原价购买?
- 斜视锥体投影矩阵推导
- UCI银行营销数据集--数据集不平衡
- 安卓开发系列(一)安卓开发环境的搭建
- 上海亚商投顾:沪指冲高回落 中字头板块爆发领涨
热门文章
- Excel VBA语句集300
- uniapp微信浏览器H5授权微信登录
- C#操作Excel总结(最全面的操作EXCEL技巧汇总)
- SVN 错误 Access to SVN Repository Forbidden的原因及解决方法
- java如何把汉字转换成机内码_java语言如何将汉字转化成五笔
- 形容谣言的四字词语_描写传递信息的四字词语
- 手机如何当win10电脑摄像头使用
- kodi树莓派_树莓派如何安装最新版Kodi 18.6 及树莓派4B针对Kodi的优化
- datadog ebpf模块 offset-guess.o 问题排查解决
- 安卓开发微信页面设计