这个css 也是极少用到。
怎么说呢,或许是出于对前端码农的同情、也或许是所有的项目永远最需要的是用最低成本最快速度实现交付。 css3(大部分)这个web较其他平台相比无可匹敌的武器却沦为了锦上添花,聊胜于无的旁支功能。
叹息三秒钟。
正文:
这个api是干嘛的呢, 这里是文档
又突然发现个问题
我是想把这个立方体给往下挪一些, 可是在我挪的时候 发现这个东西越往下挪,就会越拉伸。
看到这个情况我立马想到了景深视角的那个样式
perspective-origin
。可是即时设置了这个样式(center center),之后还是发现这样。
后来在控制台好好看了下每个dom的大小,发现了问题。
.container 是立方体, .body 是立方体的最外层容器。
景深视角始终是以最外层容器的`perspective-origin`为准。 也就是说,设置了center之后
是从.body的中心点看过去的。
而这时候.body的高度不是100vh,而是初始被container撑开的那个高度,如下图
所以要想把立方体往下挪且不要他拉伸那么变态的话
做法就是把.body的高度变高,这个问题也就自然解决了。
现在有个需求是 如果要让上次做的立方体 可以透过立方体看到后面的东西。下图这样肯定是不行的,为
这个很简单,给面加上这个属性,则可以实现这个需求
其实这个属性在更多时候会用在卡片翻转上。比如下图