1、translate(x,y)水平方向和垂直方向同时移动(也就是X轴和Y轴同时移动)
2、translate3d(x,y,z) 3d移动
3、translateX(x)仅水平方向移动(X轴移动)
4、translateY(Y)仅垂直方向移动(Y轴移动)
5、translateY(Y) 仅Z轴方向移动(Z轴移动)
<div class="wrapper">
<div>我向右向下移动</div>
</div>
通过translate将元素向Y轴下方移动100px,X轴右方移动50px:
.wrapper {
width: 200px;
height: 200px;
border: 2px dotted red;
margin: 20px auto;
}
.wrapper div {
width: 200px;
height: 200px;
line-height: 200px;
text-align: center;
background: orange;
color: #fff;
-webkit-transform: translate(50px,100px);
-moz-transform:translate(50px,100px);
transform: translate(50px,100px);
}
<div class="wrapper">
我不知道我的宽度和高是多少,我要实现水平垂直居中
</div>
不知道宽度和高度的元素实现水平、垂直居中:
.wrapper {
padding: 20px;
background:orange;
color:#fff;
position:absolute;
top:50%;
left:50%;
border-radius: 5px;
-webkit-transform:translate(-50%,-50%);
-moz-transform:translate(-50%,-50%);
transform:translate(-50%,-50%);
}
分享到:
相关推荐
transform: translate3D(x轴正向的位移, y轴正向的位移, z轴正向的位移); 沿x轴、y轴、z轴方向的位移 transform: translateX(x轴正向的位移) 沿x轴方向的位移 transform: translateY(y轴正向的位移) 沿y轴方向的位移...
transform: scale();缩放在IE浏览器下会有抖动 transform缩放在IE浏览器下会有抖动 可以在缩放的同时添加一个旋转 如: transform: scale(1.2); 换成: transform: scale(1.2) rotate(0.1deg);...clac是css3
使用transform translate多了一条白边 https://blog.csdn.net/qq_36413371/article/details/102978429
transform指变换、变形,是css3的一个属性,和其他width,height属性一样 translate 是transform的属性值,是指元素进行2D变换,2D变换就是指,元素以当前位置(0,0)按照x轴的方向移动多少,按照y轴的方向移动多少 ...
主要使用和淘宝、小米和京东类似的CSS3 translateX移动达到轮播图丝滑般翻页~
纯css3 transform文字变形3D阴影效果代码 纯css3 transform文字变形3D阴影效果代码
transform-style属性是3D空间一个重要属性,指定嵌套元素如何在3D空间中呈现。他主要有两个属性值:flat和preserve-3d。 transform-style属性的使用语法非常简单: CSS Code复制内容到剪贴板 transform-style: ...
用JS+CSS做的3D特效图,各种经典样式JS+CSS完全实现
css3 2D转换(transform) 位移(translate) 旋转(rotate) 转换中心点(transform-origin) 缩放(scale) 2D转换综合写法 正文 __start: 位移(translate) 语法 说明 transform:translate(x,y) 元素在x...
CSS3中的变形功能:在CSS3中可以利用transform功能来实现文字或图像的旋转、缩放、倾斜、移动着四种类型的变形功能。 1、如何使用transform功能: (1)在CSS3中通过transform属性来实现transform功能: (2)...
0%{-webkit-transform:scale(0);transform:scale(0);opacity:1} 100%{-webkit-transform:scale(1);transform:scale(1);opacity:0} } @-moz-keyframes warn{ 0%{-moz-transform:scale(0);transform:scale(0);...
-webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: ...
Css3-3d-transform__实现图片旋转木马3D效果</ title > </ head > < style > # doc { height : 600 px ; position : relative; overflow : hidden; background-color : # ddd ; } # stage { ...
html,css,js,CSS3,transform实现multi-flip图片轮播动画
#st-control-3:checked ~ .st-scroll #st-panel-3 h2, #st-control-4:checked ~ .st-scroll #st-panel-4 h2, #st-control-5:checked ~ .st-scroll #st-panel-5 h2{ -webkit-animation:moveDown 0.6s ease-in-out ...
css3属性transform制作圆盘导航菜单代码 css3属性transform制作圆盘导航菜单代码 css3属性transform制作圆盘导航菜单代码 css3属性transform制作圆盘导航菜单代码
.accelerate {transform: translate3d(0,0,0);-webkit-transform: translateZ(0);-moz-transform: translateZ(0);-ms-transform: translateZ(0);-o-transform: translateZ(0);transform: translateZ(0);-webkit-...
tween-css-transform 使用 CSS matrix3d()和 4x4 矩阵插值(分解/重组)对 DOM 元素进行matrix3d() 。 这允许平滑范围的 3D 旋转(使用四元数和球面插值)而无需万向节锁定。 通常与或。 例子: var tweenr = ...
一些基本功能( translate 、 rotateX等) CSS 输出( matrix3d();编辑器 UI 的输出) 0.7.0 新的类层次结构 EPPZ视图 场景 将合并到 eppz!js 中的很棒的助手 get~/setValueForKey/~keyPath 助手 现在使用...
学习 Web 技术:HTML,CSS,JavaScript学习 Web 技术:HTML,CSS,JavaScript 学习 Web 技术:HTML,CSS,JavaScript学习 Web 技术:HTML,CSS,JavaScript 学习 Web 技术:HTML,CSS,JavaScript学习 Web 技术:...