ホームページ >ウェブフロントエンド >CSSチュートリアル >CSSでディスプレイスメントtranslate()を使用するにはどうすればよいですか?翻訳の使用法の概要
CSSでディスプレイスメントtranslate()を使用するにはどうすればよいですか?翻訳の使用法の概要
- 云罗郡主オリジナル
- 2018-10-29 13:44:0937318ブラウズ
CSS3 で翻訳を使用するにはどうすればよいですか? CSSでディスプレイスメントtranslate()を使用するにはどうすればよいですか?これらは、CSS を学習する一部の初心者が遭遇する問題かもしれません。次に、CSS で replace() を使用する方法を説明しましょう。
1: Translate() の使用法
CSS スタイルでは、translate() を使用して変位を表すことがよくあります。translate() で x と y を使用して、水平方向の位置を表すことができます。要素を垂直または水平に移動します。
例: 1.translateY(y): 要素が垂直方向に移動することを示します。これを y 軸と呼びます。
2.translateX(x): は次のことを示します。要素は水平方向に移動します。x 軸と呼ばれる方向に移動します。
2:translate() syntax
transform:translateX(x);或者transform:translateY(y);
css3 では、transform 属性の変換メソッドは、transform に属します。 、そして、transform を追加する必要があります。つまり、要素が水平方向に移動する距離の単位は px とパーセントで表され、x が正の値に見える場合、要素が に移動したことを意味します。 x が負の値の場合、要素は左に移動します。
例:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS3位移translate()方法</title>
<style type="text/css">
/*设置原始元素样式*/
#origin
{
margin:100px auto;/*水平居中*/
width:200px;
height:100px;
border:1px dashed silver;
}
/*设置当前元素样式*/
#current
{
width:200px;
height:100px;
color:white;
background-color: #3EDFF4;
text-align:center;
transform:translateX(50px);
-webkit-transform:translateX(20px); /*兼容-webkit-引擎浏览器*/
-moz-transform:translateX(20px); /*兼容-moz-引擎浏览器*/
}
</style>
</head>
<body>
<div id="origin">
<div id="current"></div>
</div>
</body>
</html>効果は次のとおりです。
CSS ビデオ チュートリアル について詳しく知りたい場合は、php 中国語 Web サイトに注目してください。
以上がCSSでディスプレイスメントtranslate()を使用するにはどうすればよいですか?翻訳の使用法の概要の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。