css如何实现一个3D效果的魔方
这篇文章主要介绍“css如何实现一个3D效果的魔方”,在日常操作中,相信很多人在css如何实现一个3D效果的魔方问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”css如何实现一个3D效果的魔方”的疑惑有所帮助!接下来,请跟着小编一起来学习吧!
创新互联-专业网站定制、快速模板网站建设、高性价比文县网站开发、企业建站全套包干低至880元,成熟完善的模板库,直接使用。一站式文县网站制作公司更省心,省钱,快速模板网站建设找我们,业务覆盖文县地区。费用合理售后完善,10余年实体公司更值得信赖。
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();
到此,关于“css如何实现一个3D效果的魔方”的学习就结束了,希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习,快去试试吧!若想继续学习更多相关知识,请继续关注创新互联网站,小编会继续努力为大家带来更多实用的文章!
当前标题:css如何实现一个3D效果的魔方
当前URL:http://pwwzsj.com/article/gdodpo.html