木灵鱼儿

木灵鱼儿

阅读:360

最后更新:2022/01/26/ 0:54:45

transform 知识补充

rotate的坐标轴和默认值

z轴可以看成正对着自己脸的一根轴,每个轴的旋转方向默认如图箭头所示。

所有的旋转角度,正值都是根据默认的旋转方向来得,负值则是相反。

transform: rotateZ(45deg);

只有Z轴的旋转再二维的界面才是有效的,如下图所示:

因为在二维的界面Z轴的变化才是有效的,所以默认值的设置就是Z轴,所以简写形式等效于rotateZ

transform: rotate(45deg); /*等同于rotateZ(45deg)*/

translate

translate的变化是根据元素的坐标轴而变化的,比如X轴移动100px;

transform: translateX(100px);

正常情况下就是往右侧移动了100px距离,但是当我们改变元素的坐标轴的时候,效果就不一样了。

transform: rotate(90deg) translateX(100px);

元素旋转90度后,X轴变成往下的,于是元素往下走了100px

所以,元素的坐标轴不是固定位置的,他是会发生变化的,且与元素保持相对定位一样。

Z轴

在设置了视角和视距后,z轴才会真正的有效,当z轴正值越来越大的时候,表示我们越来越近,所以元素会变得越来越大,负值则是相反

perspective 视距

3d的变化,没有视距的情况下你很难明白它为啥会变成这个吊样,以rotate为例,当你设置rotateX(45deg)时,你应该只会发现元素好像变矮了。

当我们给transform设置视距的时候,就会看到真正的效果了。

.box {
    width: 100px;
    height: 100px;
    background-color: antiquewhite;
    transform: perspective(1000px) rotateX(45deg);
}

视距的px值越大,表示离图像越远,看着就越小,越远就表示看的越不清楚,效果也是越差,越近看的东西就很很大,也不好,所以这个值适中就行。

注意不能为负值,毕竟一个人用眼睛去看这个东西,总不可能从物体的后面往前看,但是头却在物体的正前方吧。明显的不合理。你只能改变你看的位置和角度,也就是移动头的位置。

事实上并不推荐直接在transform中写perspective;这个属性一般是建议在父级元素设置。

放在父元素的好处就是,所有的子元素3d变化都是同一个视角,但是需要注意的是,父元素的大小会对视角产生影响。往往子元素自己的视角放到父元素上就不一样了,可以试试让父元素inline-block

.wrap {
    display: inline-block;
    perspective: 1000px;
}

.box {
    width: 100px;
    height: 100px;
    background-color: antiquewhite;
    transform: rotateY(45deg);
}

需要注意的是,perspective在作为一个独立的css属性使用时,只能设置在父级,perspectivetransform同时存在于一个元素内,并不会发生变化,不等于transform: perspective(1000px) rotateX(45deg);

视角位置 perspective-origin

视角的位置和背景图的定位一样,有那么几个相同的配置属性,对应着视角所在的位置,默认是center

.wrap {
    display: inline-block;
    perspective: 1000px;
    perspective-origin: center;
}

当然也可以设置px值,正值表示往右移动,负值表示往左移动。

.wrap {
    display: inline-block;
    perspective: 1000px;
    perspective-origin: 100px;
}

二维的3d

transform的3d默认是一个扁平的3d,正面可以看,但是反面是不行的,但是一个正常的3d,它的所有角度都是可视的,所以我们可能通过设置transform-style: preserve-3d;展示一个完整的3d视角。

假设我们这么设置:

.wrap {
    display: inline-block;
    perspective: 1000px;
    perspective-origin: center;
    transform: rotateY(90deg);
}

.box {
    width: 100px;
    height: 100px;
    background-color: antiquewhite;
    transform: rotateY(45deg);
}

虽然wrap元素自身的rotateY很难有正确的效果,但是它又确实是Y轴旋转了90度,而box又相对于父级,旋转了45度,那么按道理wrap看不到,box却可以看到一个背对我们的一个样式,但是实际是啥也看不到。

当我设置父级为一个完整3d展示的时候,就可以看到了,为什么设置父级,因为父级的transform影响的子元素。

.wrap {
    display: inline-block;
    perspective: 1000px;
    perspective-origin: center;
    transform: rotateY(90deg);
    transform-style: preserve-3d;
}

.box {
    width: 100px;
    height: 100px;
    background-color: antiquewhite;
    transform: rotateY(45deg);
}

此时box是倒转的,如果有更多的子元素,你可以发现设置z-index也会有镜像的那种感觉,层级越大越底层

隐藏旋转到背面的元素

上面我们可以看到,box元素基于父级90度旋转再自己旋转45度后,他其实是一个背对我们的样式,我们看到的是一个背面。

css有一个属性,可以控制背面的元素是否显示。

backface-visibility: visible;  /*默认值*/

当我们设置hidden时,背面状态的元素将不可见。

.wrap {
    display: inline-block;
    perspective: 1000px;
    perspective-origin: center;
    transform: rotateY(90deg);
    transform-style: preserve-3d;
}

.box {
    width: 100px;
    height: 100px;
    background-color: antiquewhite;
    transform: rotateY(45deg);
    backface-visibility: hidden;
}

版权申明

本文系作者 @木灵鱼儿 原创发布在木灵鱼儿 - 有梦就能远航站点。未经许可,禁止转载。

关于作者

站点职位 博主
获得点赞 0
文章被阅读 360

相关文章