最新消息:20210816 当前crifan.com域名已被污染,为防止失联,请关注(页面右下角的)公众号

【已解决】如何把translateY的代码转换为translate3d

CSS crifan 2865浏览 0评论

折腾:

【已解决】css实现滚动和转换时用哪个好:translate3d vs translateY

之后,需要去把之前用translateY的代码:

        addPrefixCss(obj, { transition: ‘transform .2s ease-out’ });
        this.setState({
            translateY: -currentIndex * DATE_HEIGHT,
        });

转换为translate3d的写法

好像就是:

 transform: `translate3d(0px, ${ this.currentY }px, 0px)`

translateY to translate3d

css transforms – translate3d vs translate performance – Stack Overflow

Use of translate3d instead of translateX or translateY for -webkit-transform ? · Issue #1603 · jquery/jquery-mobile

CSS3 3D Transformation Functions — SitePoint

    transform: translateX(-20px) translateY(4em) translateZ(10px);

->

    transform: translate3d(-20px, 4em, 10px);

transform – CSS3参考手册

transform – CSS3参考手册

transform – CSS3参考手册

translatey():指定对象Y轴(垂直方向)的平移

translate3d():指定对象的3D位移。第1个参数对应X轴,第2个参数对应Y轴,第3个参数对应Z轴,参数不允许省略

【总结】

根据语法:

translatey():指定对象Y轴(垂直方向)的平移

translate3d():指定对象的3D位移。第1个参数对应X轴,第2个参数对应Y轴,第3个参数对应Z轴,参数不允许省略

从:

            // transform: `translateY(${this.state.translateY}px)`,

所以去改为:

            transform: `translate3d(0px, ${this.state.translateY}px, 0px)`,

即可。

调试输出:

转载请注明:在路上 » 【已解决】如何把translateY的代码转换为translate3d

发表我的评论
取消评论

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
82 queries in 0.167 seconds, using 22.02MB memory