3d在调试区输出坐标_CSS3如何实现一个 3D 效果的魔方
作者:山月行
转发链接:https://mp.weixin.qq.com/s/B5hlPmpvLXHdOvNWSeln8g
前言
❝
合抱之木,生于毫末;九层之台,起于累土.
❞
当我们遇到一个较难问题的时候,把它逐步分解,转化为我们熟悉的内容,问题就很容易得到解决。
我们现在的目标是做一个 3D 效果的魔方,我们找到它的本质,对它解构?那就先写一个立方块!
3D 相关 CSS 属性及函数
在 3D 空间中转换最重要几个形态的是平移,旋转与缩放,接下来将会介绍与制作一个 3D 效果立方体相关的 CSS 属性及函数。
- transform-style
- perspective
- backface-visibility
3D 空间
一个立方体,必然存在于一个 3D 空间,首先需要使用 CSS 指明该立方体处于 3D 空间中。
.cube { transform-style: preserve-3d;}
通过 CSS 的属性值 transform-style: preserve-3d 可以设置该元素的所有子元素都处于 3D 空间。
在科幻小说三体中,云天明讲了三个故事,其中讲到有一个深水王子,无论你在远处看还是近处看,他都一般高,不会受距离增减的影响,不符合我们现实中「近大远小」的透视规律。
正是有了透视距离,现实世界的事物才会有层次感,而在 CSS 的 3D 世界里,也有一个属性代表透视距离。
.cube { perspective: 800px; // 观察者眼睛位于上边看的全面 perspective-origin: 150% -150%;}
与二维平面不同,在 3D 空间中多了一个 Z 轴,而与 Z 轴 垂直的平面构成了 Z 平面,即我们在 2D 方向上能够看到的这个平面。
perspective 定义了观察者眼睛与 Z=0 平面(即投影面)的距离,来制造一种空间感。
perspective 最小可设置为 1px,当它值越小时,物体在投影面上越大。如下图所示
perspective-origin 代表观察者眼睛的位置,默认居中
平移与坐标系: translate3d()
.cube { transform: translate3d(x, y, z);}
translate3d(x, y, z) 定义了元素在 3D 空间沿坐标系的平移,而如果只在单轴上平移,则可以使用独立的 API。
- translateX(x): translate3d(x, 0, 0)
- translateY(y): translate3d(0, y, 0)
- translateZ(z): translate3d(0, 0, z)
当作 Z 轴方向平移时,正值代表离用户越来越近,即在视觉效果上它会越来越大。负值则相反。具体视觉效果可参考 MDN 文档。
一种他们在三维坐标系下的正方向如下所示:
translateZ | MDN[1]
旋转与原点: rotate3d() 与 transform-origin
.cube { transform: rotate3d(x, y, z, a);}
rotate3d 定义了元素在 3D 空间的旋转,旋转相比平移来说,它要多一个指标:「旋转轴,它根据从原点出发的向量 [x, y, z] 来确定旋转轴。」
[x, y, z] 坐标自然由 rotate3d(x, y, z, a) 来指定,那如何确定原点呢?
原点坐标由属性 transform-origin 来指定,如果只有前两个值代表在 2D 平面,如果有三个值代表在 3D 空间。
❝
你可以通过围绕各个坐标轴旋转 180 度,来确定原点坐标
❞
.cube { transform-origin: 100px 100px 100px;}
可以通过对一个立方体的旋转对 rotate3d 有直观的了解
正常放置
在正常状态下,各面数字如下
rotateX(180deg)
沿 X 轴旋转 180 度后,位面 2 面对用户
rotateZ(180deg)
沿 Z 轴旋转 180 度后,位面 1 面对用户,但是反转了过来
通过 MDN 文档也可以对各个转换有更直观的了解
- rotateX | MDN[2]
- rotateY | MDN[3]
- rotateZ | MDN[4]
- transform-origin | MDN[5]
一个立方体
对 CSS 3D 方面的属性及值进行熟悉之后,就能够很容易地画出一个立方体。
一个立方体由六个面组成,分别使用 Up,Down,Left,Right,Front,Back 的首字母进行表示。使用 html 描述它的结构如下
U
D
L
R
F
B
- .cube-container: 为立方体提供布局,使之处于屏幕中心位置
- .cube: 表示该立方体容器
- .face: 表示该立方体的六个面
在 .cube 选择器中声明一个 3D 空间,指定 perspective 与 transform-style 属性
.cube { perspective: 1500px; transform-style: preserve-3d;}
为了立方体的美观,优雅及调试方便,对立方体加入一些 3D 无关的样式: 关于布局,显示及色彩
为立方体提供一个 100px/100px 大小的容器,并处于屏幕正中,并且立方体每一面的字也垂直居中
$ width: 100px;.cube-container { display: flex; justify-content: center; align-items: center; height: 500px;}.cube { width: $width; height: $width; margin: $width;}.face { background: #f60; display: flex; justify-content: center; align-items: center; font-size: 2em; color: #fff;}
接下来对六个面做绝对定位,并且根据目标位置做适当的平移与旋转即可组成立方体。
$width: 100px;.face { width: $width; height: $width; position: absolute; &.face-up { transform: rotateX(90deg) translateZ($width / 2); } &.face-down { transform: rotateX(-90deg) translateZ($width / 2); } &.face-left { transform: rotateY(-90deg) translateZ($width / 2); } &.face-right { transform: rotateY(90deg) translateZ($width / 2); } &.face-front { transform: translateZ($width / 2); } &.face-back { transform: rotateX(180deg) translateZ($width / 2); }}
效果图如下
全部代码如下
codepen[6]
让立方体动起来
此时 3D 空间的立方体已经成形,为了更加形象,我决定给它一个动画。
下列 CSS 动画使它绕着向量 [1, 1, 0] 永不停歇地旋转。
@keyframes rotate { 0% { transform: rotate3d(0, 0, 0, 0); } 100% { transform: rotate3d(1, 1, 0, 360deg); }}.cube { animation: rotate 2s linear reverse infinite;}
效果图如下所示
来画一个魔方
魔方由 27 个小块组成,通过 translate3d 对 27 个小立方块进行位移,即可得到一个魔方,代码如下所示
mixin coordinate() { @for $x from 1 through 3 { @for $y from 1 through 3 { @for $z from 1 through 3 { .cube-#{$x}-#{$y}-#{$z} { transform: translate3d(($x - 2) * $width, ($y - 2) * $width, ($z - 2) * $width); } } } }}@include coordinate();
最后成型的代码及演示如下所示:
- 魔方项目:https://github.com/shfshanyue/react-rubic
3d在调试区输出坐标_CSS3如何实现一个 3D 效果的魔方相关推荐
- OpenGL(十八)——Qt OpenGL绘制一个3D世界
OpenGL(十八)--Qt OpenGL绘制一个3D世界 一.说明 本篇介绍构建一个3D的世界. 二.简介 加载3D世界,并在其中漫游: 在这一课中,你将学会如何加载3D世界,并在3D世界中漫游. ...
- python命令行调试django代码_Django shell调试models输出的SQL语句方法
在settings.py里,配置如下logging: LOGGING = { 'version': 1, 'disable_existing_loggers': False, 'handlers': ...
- 立方体在三维坐标中的旋转(3D,Spining)
立方体在三维坐标中的旋转(3D,Spining) 示例 HTML CSS 更多有趣示例 尽在 知屋安砖社区 示例 HTML <div id="ThreeJS" style=& ...
- AD如何输出坐标文件(超实用)
*AD如何输出坐标文件(超实用) 背景:贴片机生产加工,要知道具体焊点位置.SMT工程师一般需要硬件工程师提供坐标文件.另外器件坐标还有一个试产核对,即生产部他们把BOM与坐标文件里面器件进行核对.对 ...
- (C语言)找出一个二维数组中的鞍点,即该位置上的元素在该行最大,在该列上最小,也可能没有鞍点。存在则输出坐标;否则输出 -1.
#include<stdio.h> /* 找出一个二维数组中的鞍点,即该位置上的元素在该行最大, 在该列上最小,也可能没有鞍点.存在则输出坐标:否则输出 -1. */ int main(v ...
- 3D空间中的点坐标转化为屏幕二维点坐标(一)
每个人在进入计算机图形学的世界中,都有一个同样的困惑,三维世界中的三维坐标是如何被转换成屏幕上的二维坐标的,我如何在屏幕上找到一个点(二维点)对应三维世界中的点(三维点)呢? 要理解其中的过程,对学习 ...
- 用纯C语言实现3D空间中的点坐标转化为屏幕二维点坐标,包含主视图、侧视图、俯视图、正等轴投影
要实现3D空间中的点坐标转换为屏幕二维点坐标,需要进行透视变换和投影变换.以下是一些基本的思路和示例代码,可以用于实现主视图.侧视图.俯视图.正等轴投影. 1. 主视图投影 主视图投影是指以一个点作为 ...
- Godot引擎 4.0 文档 - 第一个 3D 游戏
本文为Google Translate英译中结果,DrGraph在此基础上加了一些校正.英文原版页面: Your first 3D game - Godot Engine (stable) docum ...
- echarts:实现3D地图版块叠加动效散点+轮播高亮效果
需求描述 如下图所示,展示3D效果的地图版块,并叠加显示动效散点: 实现思路 首先是3D地图版块效果的实现,可以参考广州3D地图:而动效散点的实现,可以参考地图发散分布. 这里再提一个经过尝试并不行的 ...
最新文章
- 智能经济的动力,从人工智能到超级智能
- java学习(148):三个参数的输入流
- Swift中的数据存储
- Dataframe修改列名
- DSP 2812 的经典资料
- java网页制作会说话的汤姆猫_android 仿 会说话的汤姆猫 源码
- antd-design-pro实现多页签,切换页签保留缓存,keep-alive
- ubuntu修改u盘权限_Ubuntu下U盘只读文件系统,图标上锁,提示无法修改
- 嵌入式系统之-小米路由器3G v1
- A Comprehensive Survey on Graph Neural Networks--图神经网络综合研究
- Shell替换数组元素之间的间隔符号
- 免费领取三个月苹果ARCADE订阅教程
- FL Studio教程之排列和编辑歌曲
- 如何查看服务器系统时间,服务器时间相关(硬件时间,系统时间,时区时间)...
- 职场减压:11招数让你不再是工作奴隶
- ArcObjects
- 2021年3月蓝桥杯STEMA考试正在报名
- 运用爬虫和分词库统计nga某板块标题词频
- 广电行业概览(三) 有线电视:宽带运营
- 小唐开始刷蓝桥(一)2020年第十一届C/C++ B组第二场蓝桥杯省赛真题
热门文章
- 解决 wildfly(jboss) 启动报错:'findstr' 不是内部或外部命令
- linux终端自动输入,linux shell自动输入实现
- k8s从入门到放弃--使用kubeadm快速安装kubernetes
- Duplicate Symbol链接错误的原因总结和解决方法[转]
- nginx配置多个站点的方法
- Linux服务器安全配置实例(二)用户账户权限配置
- crazyradio焊接和下载固件过程
- iOS开发之加速开发使用的28个第三方库、优秀第三方库集合
- 构建高并发高可用的电商平台架构实践 转自网络
- Centos6.4下zabbix的安装配置