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

Posted 2023-04-11

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了CSS3中的动画效果transform:translateZ()，在Z轴上移动xx距离相关的知识，希望对你有一定的参考价值。

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

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

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

拓展：

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

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

参考技术A

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

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

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

追问

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

本回答被提问者采纳

jquery使用CSS3实现文字动画效果插件Textillate.js

Textillate是一款基于jquery的使用CSS3实现文字动画的小巧插件。Textillate.js集成了一些很棒的使用CSS3动画效果的 JavaScript 库，您可非常轻轻松地把这些动画效果应该于网页中的任何文字。

Textillate 下载案例演示

使用方法

引入核心文件

<link href="assets/animate.css" rel="stylesheet">
<script src="http://libs.useso.com/js/jquery/1.9.0/jquery.min.js"></script>
<script src="assets/jquery.lettering.js"></script>

构建html标签

<h1 class="tlt">My Title</h1>

写入JS，初始化

$(function () {
    $(‘.tlt‘).textillate();
})

以上代码使用了默认的动画效果，如果你想改变动理效果，可以在html中调用data API

<h1 class="tlt" data-in-effect="rollIn">Title</h1>

你也可以在初始化时使用参数来改变

$(‘.tlt‘).textillate({ in: { effect: ‘rollIn‘ } });

当然，你也可以用Textillate给一个列表的文字都具有动画

<h1 class="tlt">
    <ul class="texts">
        <li data-out-effect="fadeOut" data-out-shuffle="true">Some Title</li>
        <li data-in-effect="fadeIn">Another Title</li>
    </ul>
</h1>
$(‘.tlt‘).textillate();

注意：你可以通过调用data api配置动画参数来控制每个li的动画效果。

参数选项

$(‘.tlt‘).textillate({
  // the default selector to use when detecting multiple texts to animate
  selector: ‘.texts‘,
  // enable looping
  loop: false,
  // sets the minimum display time for each text before it is replaced
  minDisplayTime: 2000,
  // sets the initial delay before starting the animation
  // (note that depending on the in effect you may need to manually apply 
  // visibility: hidden to the element before running this plugin)
  initialDelay: 0,
  // set whether or not to automatically start animating
  autoStart: true,
  // custom set of ‘in‘ effects. This effects whether or not the 
  // character is shown/hidden before or after an animation  
  inEffects: [],
  // custom set of ‘out‘ effects
  outEffects: [ ‘hinge‘ ],
  // in animation settings
  in: {
    // set the effect name
    effect: ‘fadeInLeftBig‘,
    // set the delay factor applied to each consecutive character
    delayScale: 1.5,
    // set the delay between each character
    delay: 50,
    // set to true to animate all the characters at the same time
    sync: false,
    // randomize the character sequence 
    // (note that shuffle doesn‘t make sense with sync = true)
    shuffle: false,
    // reverse the character sequence 
    // (note that reverse doesn‘t make sense with sync = true)
    reverse: false,
    // callback that executes once the animation has finished
    callback: function () {}
  },
  // out animation settings.
  out: {
    effect: ‘hinge‘,
    delayScale: 1.5,
    delay: 50,
    sync: false,
    shuffle: false,
    reverse: false,
    callback: function () {}
  },
  // callback that executes once textillate has finished 
  callback: function () {}});