CSS3中的动画效果transform:translateZ(),在Z轴上移动xx距离
发布网友
发布时间：2022-05-13 20:41
共3个回答
懂视网
时间：2022-05-14 01:02
点击运行效果
html css3 网站模版 个人博客模版 扁平化 div+css bootstrap 企业模版 古典/文化 婚纱摄影 爱情 jquery
热心网友
时间：2022-05-13 22:10
下面这个代码在Chrome上运行没问题啊：
其他浏览器上如果没效果，可自行添加前缀再试。注意：只有IE10+、FireFox、Chrome、Safari才支持3D转换效果。
拓展：
1、CSS即层叠样式表(Cascading StyleSheet)。 在网页制作时采用层叠样式表技术，可以有效地对页面的布局、字体、颜色、背景和其它效果实现更加精确的控制。
2、CSS3是CSS技术的升级版本，CSS3语言开发是朝着模块化发展的。以前的规范作为一个模块实在是太庞大而且比较复杂，所以，把它分解为一些小的模块，更多新的模块也被加入进来。这些模块包括: 盒子模型、列表模块、超链接方式 、语言模块 、背景和边框 、文字特效 、多栏布局等。
热心网友
时间：2022-05-13 23:28
下面这个代码在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上，这才有了效果…… 这问题都坑了我好多天了…
