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

Answer 2

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

<style>
.father{
    width: 200px; height: 200px;
    border: 1px solid #000;
    margin: 100px auto;
    perspective: 800px;
}
.son{
    width: 100%; height: 100%; 
    background: lime;
    transition: all 3s;
    transform: translateZ(-200px);
}
.son:hover{
    transform: translateZ(200px);
}
</style>
<div class="father">
    <div class="son">鼠标移到这里</div>
</div>

其他浏览器上如果没效果，可自行添加前缀再试。

注意：只有IE10+、FireFox、Chrome、Safari才支持3D转换效果

追问

谢了啊，现在知道为什么我的代码没效果了，我之前只写了一个div，然后透视效果也写在了上面，结果浏览器没效果。然后我照着你的代码，把透视效果放在父级div上，这才有了效果…… 这问题都坑了我好多天了…