木灵鱼儿
阅读:809
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属性使用时,只能设置在父级,perspective
和transform
同时存在于一个元素内,并不会发生变化,不等于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;
}
版权申明
本文系作者 @木灵鱼儿 原创发布在木灵鱼儿 - 有梦就能远航站点。未经许可,禁止转载。
相关推荐
css选择器优先级计算规则
规则概览0级通配选择器、选择符、逻辑组合伪类通配选择器:* {}选择符:+、>、~、空格、||逻辑组合伪类::not() {} :is() {} :where() {} :has() {}1级标签选择器body {}2级类名选择器、属性选择器、伪类类名选择器:.foo {}属性选择器:[foo] {}伪类::hover {} :active {} :focus {} :focus-within {} :focus-visible {} :link {} :visited {} :any-link {} :target {} :target-within {}...
关于给css自动添加浏览器前缀
前言为了兼容之前的旧浏览器版本,特别是安卓4.4这种低版本,transform是一定得增加浏览器前缀的,但是我在项目中遇到了设置无效的问题,极度蛋疼,下面是我的解决教程,当然没这个问题,看这篇文章,相信你对如果给项目增加浏览器前缀,会有很充分的认识。教程给css增加浏览器前缀,业界的做法就是使用postcss,目前webpack与vue cli他们需要安装的依赖略有不同:webpack:pnpm i postcss postcss-loader autoprefixer -D添加对应的rules{ test: /.s?css$/, use: [ ...省略...
meta name= viewport 知识补充
网页不能直接识别移动设备的实际像素大小再没有设置meta viewport的时候,网页只能识别硬件的物理像素,而非软件像素。物理像素:硬件本身的实际像素大小软件像素:设备尺寸限制,过大的像素并不能带来很好的体验,显示的内容过多反倒无法正常使用,于是有了软件像素,软件像素是基于一定像素比得到的值。比如 iPhone X的软件像素是:375px*812px;它的比是:3;那么它的物理像素就等于:(375*3)*(812*3)更多的对比可以去这个网站查看:mydevice然而实际上移动端设备都会有一个默认的宽度:980px,所以,即便我们没有设置meta viewport,网页也不可能真的使用...

flex布局知识补充
子元素自身的order属性子元素的order的作用详解:默认情况下order的值都为0,如果这个值越小,那么就越靠近起始点,值越大,位置就越后,order其实用于移动元素的位置,而位置的方向则取决于父元素设置的:flex-direction子元素自身的align-self属性从正常角度,align-self是控制子元素y轴的对齐方式,也称侧轴对齐,这个y轴的定义也是取决于父元素flex-direction子元素自身的flex-basis属性flex-basis的效果,最好配合:flex-shrink:0;让子元素不被压缩。flex-basis会根据主轴的来设置元素的宽度还是高度:当主轴是...
纯css来做表单校验样式
css3新增了三个伪类::required、:valid、:invalid:required 表示input不能为空时使用的:valid 表示通过,表单元素和form表单都有的伪类:invalid 表示不通过,表单元素和form表单都有的伪类其实如果要做一个表单css校验样式,:valid和:invalid就行了,但是实际操作上,:invalid还是有一些问题的。当表单元素有required属性的时候,该表单元素默认就是:invalid,也就说,必填的表单元素,一开始就是不通过。所以,如果此时设置:invalid伪类样式,是不合适的。解决办法就是:使用:placeholder-shown...

移动端适配iPhoneX和安卓底部小黑条
这个问题还是同事发现的,毕竟我这种穷人根本用不起苹果,更何况也用不来,毕竟,我爱安卓。废话不多说,主要问题就是 iPhoneX底部小黑条问题,他的宽度也会被网页占据,导致小黑条显示在网页上头,第一是触发上会出现问题,第二是难看。解决办法就是通过css处理。解决方案首先对meta标签添加一条属性。<meta name="viewport" content="width=device-width, viewport-fit=cover">如果你已经有了viewport声明,那么就在后面content里加上viewport-fit=cover...

css使用系统字体作为网页字体最佳实践
目前前端对字体的选择,最好的做法就是用系统的默认字体,这样省去了对每个操作系统的字体判断,谁知道我们指定的这个字体用户安装没有,而且字体文件一向都很大,特别是中文字体。但是对于指定系统字体,其实也是需要兼容的,这里就放上一个专业的字体文章:《奇思妙想 CSS 文字动画》;虽然这个文章名字叫动画,但是里面内容很丰富,自己学习。以css-tricks的为模板,提取其中精华,大概是这么一条信息:{ font-family: system-ui, -apple-system, BlinkMacSystemFont, segoe ui, Roboto, Helvetica, Arial, ...

flex-grow 1; 不能等分的问题
当我们给父元素设置flex布局的时候,子元素为了能够等分,常常flex-grow: 1;,但是你会发现,当里面有内容的时候,宽度就发生了变化,变得不是等分了。所以我们可以理解:flex-grow: 1其实他不是真正意义上的等分宽度,而是等分剩余宽度,而剩余宽度是总宽度减去内容宽度,再进行等分。而且这个等分甚至还是根据内容多少来等分,有的内容多,他等分还多一些。所以这就很尴尬。为此,如果想要真正的等分,就需要设置相同的width宽度。如:.value { width: 0; flex-grow: 1; }这样就行了。width的值0我感觉是最好的,如果你设置其他宽度也行,具体看自己...
通用一键复制代码的方法
最近想给博客主题增加一个一键复制代码的功能,结果发现highlight.js并不支持一键复制,这就非常的可惜啊。于是百度了下,找到一个不错的例子,根据其例子我自己写了一个通用的方式。效果图安装[hide]需要使用clipboard.js,所以需要js引入这个复制用的库<script type="text/javascript" src="https://cdn.staticfile.org/clipboard.js/2.0.6/clipboard.min.js"></script>引入完毕后我们需要给每个代码块增加一个复制按...
