--- title: translate slug: Web/CSS/translate tags: - CSS - CSS属性 - Transforms - 参考 - 实验性 - 平移 translation_of: Web/CSS/translate ---
CSS 属性 translate
允许你单独声明平移变换,并独立于 {{cssxref("transform")}} 属性。这在一些典型的用户界面上更好用,而且这样就无需在 transform
中声明该函数并记住转换函数的确切顺序了。
/* Keyword values */ translate: none; /* Single values */ translate: 100px; translate: 50%; /* Two values */ translate: 100px 200px; translate: 50% 105px; /* Three values */ translate: 50% 105px 5rem;
translate()
函数(2D 平移)中指定单个值。translate()
函数(2D 平移)中函数指定两个值。translate3d()
函数(3D 平移)。none
{{csssyntax}}
<div> <p class="translate">Translation</p> </div>
* { 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; }
规范 | 状态 | 注释 |
---|---|---|
{{SpecName('CSS Transforms 2', '#individual-transforms', 'individual transforms')}} | {{Spec2('CSS Transforms 2')}} | Initial definition. |
{{CSSInfo}}
{{Compat("css.properties.translate")}}
注意:skew 不是一个独立的变换属性。