探究transform动画元素的z-index

在一次需求中,需要做出三张卡牌走马灯式滚动的效果,由于在前面的一张卡牌需要挡住后面的卡牌,自然而然地就用 z-index 使前面的卡牌显示在最上面,配以 transform 动画让“走马灯”滚起来,在开发过程中,在 PC 侧 Chrome 中表现良好,在本人手机浏览器中也表现良好,最后测试时却发现,在微信客户端或 QQ 客户端中打开页面出现问题,“走马灯”滚动时,卡牌先通过 transform 就位后,才把 z-index 设置较大的卡牌置于上面,感觉上非常的不流畅。

以电影之眼看CSS3动画(一)

CSS3动画的变形基础(transform)包含4种变形方式(translate、rotate、scale、skew),同时还可设置2D、3D、变形原点(transform-origin)、透视(perspective)、透视原点(perspective-origin)等等特性;动画时间频率包含9种基本模式(ease、linear、ease-in、ease-out、ease-in-out、step-start、step-end、steps),甚至还可以使用cubic-bezier写出任何你想要的模式;再加上动画持续时间(animation-duration)等设定,各种排列组合,CSS3动画简直拥有了整个世界!

使用ThreeJS在浏览器中展示3D物件

这是一篇介绍如何在浏览器中展示洗面奶3D物件的文章。 这篇文章仅仅是向你介绍应对下面这种的场景的方法:如果有人突然跟你说,你的皮肤挺不错的耶,你用的什么洗面奶,我也想买一个,你会怎么回答呢?手头又没法拿出你的洗面奶给他看,光凭言语无法准确地形容出你的洗面奶到底长什么样。作为前端的程序猿,我会想,这种时候如果可以有一个链接让对方自己去看一下把玩一下,对方势必会对你的洗面奶高Bigger有更深刻的认识。本文的目的,就是向屏幕对面的程序猿介绍这种高效搞笑的方式。