效果如下：
开门的声音效果更棒了！
可以点击这里：CSS3 3D变换实现带音效的单开门效果演示
实现开门效果的关键
1.在容器元素上设置透视距离CSS代码如下：
。门框 {
视角：1200px；
}
2.设置transform-style为3D变换
我们的门需要设置为3D变换风格，否则效果会平淡僵硬，而且背面会看不见，以符合现实。
CSS代码如下：
.门{
变换风格：保留 3d；
背面可见性：隐藏；
}
3.rotateY变换实现门开关效果
此时，我们只需要通过CSS或JS改变门元素的rotateY变换角度值，门的开关效果就有了。
比如上面的单开门效果默认是关闭的。此时rotateY角度为0deg，门是向右打开的，所以可以将transform-origin设置为向左，即它们的左边缘为轴：
.门{
变换：旋转Y(0deg)；
变换原点：左；
}
门全开时，角度为90度，CSS表示为：
.门{
变换：rotateY(-90deg)；
}
效果达到了，核心就这么简单。
如果你的理解还是有点不清楚，可以参考我之前高流量的文章：《好了，CSS3 3D变换就这些了！》
开门效果难以实现
其实就实现最终效果而言，难点并不是开关门的动作本身，而是门的3D效果的实现。本质上就是实现一个立方体的效果，只不过这个立方体比较扁平。
对于CSS3立方体效果的实现，我的技巧如下：
还记得小时候我们如何用折纸将2D平面变成3D立方体吗？
我的实施步骤是一样的。首先，先实现平面效果。示意图如下（因为是半开的门，所以我们只需要4个面）：
然后，填写你脑海中的空间结构。为了实现3D效果，上边缘需要沿着超视觉方向的水平线折叠90度，右边缘需要沿着超视觉方向的垂直线折叠90度。
此行为使用 CSS 3D 转换语言作为rotateX(90deg) 和rotateY(90deg) 进行描述。
由于CSS中元素默认的变换中心点是中心，所以上面直接旋转是不够的。要么我们修改变换原点位置，要么元素的中心提前偏移到门边缘的变换轴。
因此，只需点击几下，我们就可以获得 3D 效果。详细内容请参考demo页面源码，是很好的学习案例素材。
2、CSS3双门3D开门效果的实现办公室或书房的门是单门，神府大院的门是双门，比如著名小学动画柯南中的门。
既然可以实现单门效果，那么双门自然也不成问题。效果如下：
同样，上面的截图视频也没有音效。如果你想真实感受开门的冲击力，可以点击这里：CSS3 3D变换实现双开门效果演示并附音效
实现原理和上面的单门效果类似，就不赘述了。
这里的开门动画完全使用CSS3过渡实现，与最初的demo不同。在最初的演示中，计时器不断改变旋转 Y 角度。一切皆有可能，就看你需要什么了。
![vs2008管理员[visual studio 管理员]](/upload/images/34997338)
