translate3d - 腾讯云开发者社区 - 腾讯云

开发者社区

文档建议反馈控制台

文章/答案/技术大牛

发布

translate3d()

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

8862 0

translate3d绕轴旋转

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

8454 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

5812 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

1.1K2 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, -

1.1K2 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;

8002 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.5K1 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.6K1 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(

3.2K5 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.3K2 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

1.2K4 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

1.1K2 0

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

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

3.3K13 0

霓虹灯数字时钟（可复制源代码）

: rotateY(-90deg) translate3d(0, 0, 105px); transform: rotateY(-90deg) translate3d(0, 0, 105px);...background: #151515;}.top { -webkit-transform: rotateX(90deg) translate3d(0, 0, 105px); transform...front { -webkit-transform: translate3d(0, 0, 105px); transform: translate3d(0, 0, 105px); background...) translate3d(0, 0, 105px); transform: rotateX(90deg) translate3d(0, 0, 105px); background: #222...-webkit-transform: rotateX(90deg) translate3d(0, 0, 105px); transform: rotateX(90deg) translate3d

2741 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); } }

6.4K3 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

2K7 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组件就可以用了，但是这是组件

7971 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

1.3K3 0

vue轮播组件--不插电手动粘贴版

(0, 0, 0); z-index: 300; } .pre{ transform: translate3d(-100%, 0, 0); z-index...: 300; } .next{ transform: translate3d(100%, 0, 0); z-index: 300; } } .trans...$set('translateObj[preIndex].transform','translate3d('+(this.percent-100)+'%, 0, 0)'); this...$set('translateObj[nextIndex].transform','translate3d('+(this.percent+100)+'%, 0, 0)'); this...$set('translateObj[shufflingIndex].transform','translate3d('+(this.percent)+'%, 0, 0)'); }

1K2 0

「HTML&CSS」第三部分

轴右边是正值，左边是负值 y 轴：垂直向下 -- 注意：y 轴下面是正值，上面是负值 z 轴：垂直屏幕 -- 注意：往外边的是正值，往里面的是负值二、3D 转换 3D转换知识要点 3D位移：translate3d...x 轴上移动 transform: translateY(100px)：仅仅是在 y 轴上移动 transform: translateZ(100px)：仅仅是在 z 轴上移动 transform: translate3d...(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 知识点讲解如果想要网页产生 3D效果需要透视(理解成 3D物体投影的 2D 平面上) 实际上模仿人类的视觉位置

3313 0

点击加载更多

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭