CSS 3 实现 3D 答案之书翻阅

1,698 阅读1分钟

前段时间不是那个《我们相爱吧》

周冬雨跟余文乐有一本答案之书吗

让我们用css3简单实现一下

来张效果图先


本来想放一张我的自拍

我怕涨粉涨太厉害,只能用我的锁骨照了

主要用到的css3属性

perspective




图片看起来可能不太明显,该属性主要作用就是观察者与z=0平面的距离,使具有三维位置变换的元素产生透视效果。z>0的三维元素比正常大,而z<0时则比正常小,大小程度由该属性的值决定。默认情况下,消失点位于元素的中心,但是可以通过设置perspective-origin属性来改变其位置。< p="">

transform

transform-style属性指定了,该元素的子元素是(看起来)位于三维空间内,还是在该元素所在的平面内被扁平化

其余用到的就是我们常用的动画了

最后的话如果想要动态出现 yes or no 的信息的话可以写个js随机事件

ps:早睡早起,常做运动,多与异性交朋友~

爱我就分享,长按二维码扫描关注哦~助我早日有留言功能