translate
CSS 属性 translate
允许你单独声明平移变换,并独立于 transform
属性。这在一些典型的用户界面上更好用,而且这样就无需在 transform
中声明该函数并记住转换函数的确切顺序了。
语法
css
/* Keyword values */
translate: none;
/* Single values */
translate: 100px;
translate: 50%;
/* Two values */
translate: 100px 200px;
translate: 50% 105px;
/* Three values */
translate: 50% 105px 5rem;
值
形式语法
示例
HTML
html
<div>
<p class="translate">Translation</p>
</div>
CSS
css
* {
box-sizing: border-box;
}
html {
font-family: sans-serif;
}
div {
width: 150px;
margin: 0 auto;
}
p {
padding: 10px 5px;
border: 3px solid black;
border-radius: 20px;
width: 150px;
font-size: 1.2rem;
text-align: center;
}
.translate {
transition: translate 1s;
}
div:hover .translate {
translate: 200px 50px;
}
结果
规范
Specification |
---|
CSS Transforms Module Level 2 # individual-transforms |
初始值 | none |
---|---|
适用元素 | transformable elements |
是否是继承属性 | 否 |
Percentages | refer to the size of bounding box |
计算值 | as specified, but with relative lengths converted into absolute lengths |
Animation type | a transform |
Creates stacking context | yes |
浏览器兼容性
BCD tables only load in the browser