translate3d_translate3d怎么用_滚动时变换translate3d - 腾讯云开发者社区 - 腾讯云

开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

translate3d()

用途 translate3d() 规定3D空间移动。语法 translate3d(x, y, z) 值值描述 x 值或值，规定X轴的移动距离。...class="stage"> .stage{ width:50px; height:50px; background:red; transform: translate3d

7982 0

translate3d绕轴旋转

版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内...

5974 0

您找到你想要的搜索结果了吗？

是的

没有找到

3D移动 translate3d

3D转换我们主要学习工作中最常用的3D位移和3D旋转主要知识点 3D位移：translate3d(xy,z) 3D旋转： rotate3d(xy,) 透视： perspective 3D呈现： transfrom...- style 二、3D移动 translate3d 3D移动在2D移动的基础上多加了一个可以移动的方向，就是z轴方向。...translateY(100px):仅仅是在Y轴上移动 translform: translateZ(100px):仅仅是在Z轴上移动(注意： translateZ一般用px作单位) transform: translate3d...）目前看不到效果，需要配合透视使用 transform: translateX(100px) translateY(100px) translateZ(100px); transform: translate3d

4502 0

translate3d模拟滚动条

做移动端页面，通常是不用原生的scroll,而是用translate3d来模拟，原因主要是原生的scroll对移动端的支持并不是很好，样式也不好看（有滚动条出现），用translate3d来模拟还可以调用...400px; height: 500px; overflow: hidden; } #listContentUl { position:absolute; top:0; left:0; transform:translate3d...<= parentH - childH){ if(onoff2){ onoff2 = false; downY = touch.pageY; } $(This).css('transform','translate3d...(0,'+((touch.pageY - downY)/3 + (parentH - childH))+'px,0)'); } else{ $(This).css('transform','translate3d...(0,'+(parentH - childH)+'px,0)'); } } else{ speed *= 0.9; $(This).css('transform','translate3d(0,'+(iTop

9082 0

天哪！跟真的一样（CSS）

(-50%, -75%, 0); -ms-transform: translate3D(-50%, -75%, 0); transform: translate3D(-50%...(0, -90%, 0) rotate3d(0, 0, 1, 10deg) translate3d(0, 30%, 0); transform: translate3d(0, -...height: 65px; -webkit-transform: translate3d(0, -90%, 0) rotate3d(0, 0, 1, -15deg) translate3d(0,...30%, 0); transform: translate3d(0, -90%, 0) rotate3d(0, 0, 1, -15deg) translate3d(0, 30%...(0, -90%, 0) rotate3d(0, 0, 1, 10deg) translate3d(0, 30%, 0); transform: translate3d(0, -

8892 0

自定义swiper动画之实现两段动画效果

: translate3d(0, 0, 0); } 70%, 90% { -webkit-transform: translate3d(-10px, 0, 0); transform...: translate3d(-10px, 0, 0); } 60%, 80% { -webkit-transform: translate3d(10px, 0, 0); transform...: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); } 50% { opacity: 1; -...(0, 0, 0); transform: translate3d(0, 0, 0); } 70%, 90% { -webkit-transform: translate3d...(-10px, 0, 0); transform: translate3d(-10px, 0, 0); } 60%, 80% { -webkit-transform: translate3d

2.4K1 0

飘动云彩背景

cloud_one 50s linear infinite; animation: cloud_one 50s linear infinite; -webkit-transform: translate3d...(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); transform...(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); transform...(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); transform...: translate3d(0, 0, 0); } @-webkit-keyframes sky_background { 0% { background: #007fd5;

5802 0

Vue组件设计-文字悬停特效

(-100%, 0, 0); transform: translate3d(-100%, 0, 0); -webkit-transition: -webkit-transform 0.4s...(100%, 0, 0); transform: translate3d(100%, 0, 0); } .link-obj span { position: absolute;...(0, 100%, 0); transform: translate3d(0, 100%, 0); } .link-obj span:nth-child(2)::before { bottom...: 0; -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); } .link-obj...(0, 0, 0); transform: translate3d(0, 0, 0); -webkit-transition-timing-function: cubic-bezier(

1.1K1 0

菜鸡博客开……开……开源了!

(0, 0, 0); -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d...-moz-transform: translate3d(0, -42px, 0); } 100% { transform: translate3d...(0, 0, 0); -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d...-moz-transform: translate3d(0, -42px, 0); } 45% { transform: translate3d(...-moz-transform: translate3d(0, -42px, 0); } 36% { transform: translate3d(

2.7K5 0

H5纯CSS3逼真的卡通大象走路动画特效

@keyframes leg-animation { 0% { height: 65px; -webkit-transform: translate3d(0, -90%, 0) rotate3d(0,...0, 1, 10deg) translate3d(0, 30%, 0); transform: translate3d(0, -90%, 0) rotate3d(0, 0, 1, 10deg) translate3d...(0, 0, 1, -15deg) translate3d(0, 30%, 0); transform: translate3d(0, -90%, 0) rotate3d(0, 0, 1, -15deg...) translate3d(0, 30%, 0); } 75% { height: 65px; } 100% { height: 65px; -webkit-transform: translate3d...(0, -90%, 0) rotate3d(0, 0, 1, 10deg) translate3d(0, 30%, 0); transform: translate3d(0, -90%, 0) rotate3d

1.1K2 0

7b2美化-鼠标悬停导航菜单翻转特效

content: attr(data-hover); position: absolute; top: -30px; left: 0; transform: translate3d...(0,0,0); -moz-transform: translate3d(0,0,0); -webkit-transform: translate3d(0,0,0); } .top-menu...content: attr(data-hover); position: absolute; top: -90px; left: 0; transform: translate3d...(0,0,0); -moz-transform: translate3d(0,0,0); -webkit-transform: translate3d(0,0,0); } .b2-menu

8434 0

Angular练习之animations动画二

(0,0,0)',background:'red' })), // 定义另外一个状态right state('right', style({ transform: 'translate3d(200%...我就不演示了 // 入场动画 transition("void => *", [ style({ opacity: 0,transform: 'translate3d(200%,200%...(-400%,0,0)', offset: 0}), style({opacity: 0.5, transform: 'translate3d(-150%,-50%,0)', offset...: 1, transform: 'translate3d(0,0,0)', offset: 1.0}) ])) ]), // 出场动画 transition(":leave"...: 0.5, transform: 'translate3d(150%,-50%,0)', offset: 0.7}), style({opacity: 0, transform: 'translate3d

9102 0

JS+CSS 3实现图片滑块效果

: translate3d(0, -100%, 0); } } @keyframes enter-right { 0% { z-index: -1; transform: translate3d...: translate3d(100%, 0, 0); } } @keyframes enter-bottom { 0% { transform: translate3d(0, 100%,...: 1; transform: translate3d(0, 0, 0); } 100% { z-index: -1; transform: translate3d(0,...100%, 0); } } @keyframes enter-left { 0% { transform: translate3d(-100%, 0, 0); } 100% {...: translate3d(0, 0, 0); } 100% { z-index: -1; transform: translate3d(-100%, 0, 0); } }

5.3K3 0

如何用 vue 制作一个探探滑动组件

--z-index: -1 调整stack-item层级"--> <li class="stack-item" style="transform: <em>translate3d</em>...2、图片滑动图片滑动效果，在很多场景中都有出现，其原理无非是监听touchs事件，得到位移，再通过<em>translate3D</em>改变目标位移，因此我们要实现的步骤如下：对stack进行touchs事件的绑定...监听并储存手势位置变化的数值改变首图css属性中<em>translate3D</em>的x，y值具体实现在vue框架中，不建议直接操作节点，而是通过指令v-on对元素进行绑定，因此我们将绑定都写在v-for遍历里

3K13 0

总结 | 移动端 CSS 常用小结

webkit-overflow-scrolling: touch; css3 元素居中 3d position: absolute; top: 50%; left: 50%; -ms-transform: translate3d...(-50%,-50%,0);/*IE9*/ -moz-transform: translate3d(-50%,-50%,0);/*Firefox*/ -webkit-transform: translate3d...(-50%,-50%,0);/*Safari and Chrome*/ -o-transform: translate3d(-50%,-50%,0);/*Opera*/ transform: translate3d

1K3 0

前端成神之路-HTML5CSS3_03

二、3D 转换 3D 转换知识要点 3D 位移：translate3d(x, y, z) 3D 旋转：rotate3d(x, y, z) 透视：perspctive 3D呈现 transfrom-style...3D 移动 translate3d 3D 移动就是在 2D 移动的基础上多加了一个可以移动的方向，就是 z 轴方向 transform: translateX(100px)：仅仅是在 x 轴上移动...(x, y, z)：其中x、y、z 分别指要移动的轴的方向的距离注意：x, y, z 对应的值不能省略，不需要填写用 0 进行填充语法 transform: translate3d(x, y, z...) 代码演示 transform: translate3d(100px, 100px, 100px) /* 注意：x, y, z 对应的值不能省略，不需要填写用 0 进行填充 */ transform:...translate3d(100px, 100px, 0) 三、透视 perspective 四、 translateZ translateZ 与 perspecitve 的区别 perspecitve

4663 0

通过css来开启硬件加速提升网页应用流畅性

例如 .cube { -webkit-transform: translate3d(250px,250px,250px) rotate3d(250px,250px,250px,-120deg.../* Other transform properties here */ } 在webkit内核的浏览器中，还有一个可行的方法： .cube { -webkit-transform: translate3d...(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); transform...: translate3d(0, 0, 0); /* Other transform properties here */ } 需要提醒的就是只对需要进行的动画效果的元素使用上面的方法，使用GPU

1.2K2 0

如何写一个vue插件

this.steps); this.span = document.querySelector('.uic-steps'); this.span.style.transform = `translate3d...clearInterval(that.steps); } this.step++; that.span.style.transform = `translate3d...this.step)}%,0,0)`; let finishTimeout = setTimeout(() => { that.span.style.transform = `translate3d...display: block; width: 100%; height: 100%; background-color: #297dff; -webkit-transform: translate3d...(-100%, 0, 0); transform: translate3d(-100%, 0, 0); } } --> 正常情况我们引入这个.vue组件就可以用了，但是这是组件

6441 0

一个栗子带你上手CSS3动画

: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @keyframes anima_move {...0%, 16%, 42%, 74%, 100% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d...(0, 0, 0); } 29% { -webkit-transform: translate3d(-1rem, 0, 0); transform...: translate3d(-1rem, 0, 0); } 87% { -webkit-transform: translate3d(1rem, 0, 0);...transform: translate3d(1rem, 0, 0); } } @keyframes anima_sprite { 0%, 16%, 42%, 58%, 74%, 100%

5282 0

CSS3动画-抛物线运动

(0px, 0, 0); } 25% { transform: translate3d(100px, -40px, 0); } 50% { transform: translate3d...(200px, -56px, 0); } 75% { transform: translate3d(300px, -68px, 0); } 100% { transform: translate3d...(400px, -80px, 0); } } @-webkit-keyframes example { 0% { transform: translate3d(0px, 0, 0);...} 25% { transform: translate3d(100px, -40px, 0); } 50% { transform: translate3d(200px, -56px..., 0); } 75% { transform: translate3d(300px, -68px, 0); } 100% { transform: translate3d(400px

1.7K7 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭