Question

CSS3中的动画效果transform:translateZ()，在Z轴上移动xx距离

我在CSS3的教学视频上看到有看到有这样一个动画效果: transform:translateZ(); 在Z轴上移动xx距离 在W3c的文档上也看到有这个动画效果， 我用Hbuilder来写的前端页面，但是在写代码的时候没有这个动画效果的代码提示,只有translateX()，translateY()， translate()这三个提示，就没有translateZ()的提示， 我就自己把translateZ()这个代码写上去，然后用浏览器来运行，只会实现translateX()，translateY()， translate()这三个动画效果，translateZ()就没有任何效果，换浏览器都不行。后来我用Webstorm来来写代码试验动画效果，结果跟HBuilder是一样的 我就想问问，到底有没有translateZ()这个动画效果，还是有其他的原因????都要疯了

Answer 1

下面这个代码在Chrome上运行没问题啊：

其他浏览器上如果没效果，可自行添加前缀再试。注意：只有IE10+、FireFox、Chrome、Safari才支持3D转换效果。

拓展：

1、CSS即层叠样式表(Cascading StyleSheet)。 在网页制作时采用层叠样式表技术，可以有效地对页面的布局、字体、颜色、背景和其它效果实现更加精确的控制。

2、CSS3是CSS技术的升级版本，CSS3语言开发是朝着模块化发展的。以前的规范作为一个模块实在是太庞大而且比较复杂，所以，把它分解为一些小的模块，更多新的模块也被加入进来。这些模块包括: 盒子模型、列表模块、超链接方式 、语言模块 、背景和边框 、文字特效 、多栏布局等。