javascript - css3 rotateX效果的实践

问题描述

问 题

我想做一个类似 http://huaban.com/pins/41377812 的3d折叠的名片，但是中间折叠的两个div一直有bug.

1. 如果折叠上部分用的transform-origin：top;-webkit-transform: rotateX(-90deg);，下部分是transform-origin：bottom;-webkit-transform: rotateX(90deg);，这样的话就会中间连不上，相反的话，外层x轴的宽度又会超出来，这块应该怎么写呢。

demo1: http://game.howlab.cn/card/index4.html

demo2: http://game.howlab.cn/card/index5.html

貌似我要同时改translateY，但是y的值我不知道应该怎么算，求解: )

解决方案

3d折叠效果主要使用了景深perspective，translateZ，rotateX来实现的。

点击阅览

没有做兼容性处理，仅支持Chrome

这篇关于javascript - css3 rotateX效果的实践的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！