この記事はCSS3学習シリーズのmobile属性の詳細な解説を中心に紹介していますが、編集者が非常に良い内容だと思ったので、参考としてシェアさせていただきます。編集者をフォローして見てみましょう。皆さんのお役に立てれば幸いです。
Transform関数
Scale
テキストや画像の拡大縮小処理を実現するにはsacleメソッドを使用します。例えば、sacle(0.5)は50%縮小を意味します。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>scale方法使用示例</title>
<style>
p {
width: 300px;
margin: 150px auto;
background-color: yellow;
text-align: center;
-webkit-transform: scale(0.5);
-moz-transform: scale(0.5);
-o-transform: scale(0.5);
}
</style>
</head>
<body>
<p>示例文字</p>
</body>
</html>ログイン後にコピー
また、要素の横方向の倍率と縦方向の倍率を個別に指定することもできます。 例は以下のとおりです。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>scale方法使用示例</title>
<style>
p {
width: 300px;
margin: 150px auto;
background-color: yellow;
text-align: center;
-webkit-transform: scale(0.5,2);
-moz-transform: scale(0.5,2);
-o-transform: scale(0.5,2);
}
</style>
</head>
<body>
<p>示例文字</p>
</body>
</html>ログイン後にコピー
tilt
文字や画像の傾き処理を実装するには、skewメソッドを使用します。パラメータで水平方向の傾斜角と垂直方向の傾斜角を指定します。たとえば、「skew(30deg,30deg)」は水平方向に 30 度、垂直方向に 30 度傾斜することを意味します。垂直方向に 30 度の例は次のとおりです。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>skew方法使用示例</title>
<style>
p {
width: 300px;
margin: 150px auto;
background-color: yellow;
text-align: center;
-webkit-transform: skew(30deg, 30deg);
-moz-transform: skew(30deg,30deg);
-o-transform: skew(30deg,30deg);
}
</style>
</head>
<body>
<p>示例文字</p>
</body>
</html>ログイン後にコピー
Rotation
要素を回転するには、「角度」という単位があり、正の数値は時計回りの回転を意味します。負の数は反時計回りの回転を意味します。例は以下のとおりです。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>对元素使用多重变形的示例</title>
<style>
p {
margin: 100px;
width: 300px;
background-color: yellow;
text-align: center;
-webkit-transform:rotate(30deg);
-moz-transform:rotate(30deg);
-o-transform:rotate(30deg);
}
</style>
</head>
<body>
<p>示例文字</p>
</body>
</html>ログイン後にコピー
Move
テキストや画像を移動するにはtranslateメソッドを使用し、パラメータで水平方向の移動距離と垂直方向の移動距離を指定します。例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>translate方法使用示例</title>
<style>
p {
width: 300px;
margin: 150px auto;
background-color: yellow;
text-align: center;
-webkit-transform: translate(50px,50px);
-moz-transform: translate(50px,50px);
-o-transform: translate(50px,50px);
}
</style>
</head>
<body>
<p>示例文字</p>
</body>
</html>ログイン後にコピー
変形例
例 1:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>对元素使用多重变形的示例</title>
<style>
p {
width: 300px;
background-color: yellow;
text-align: center;
-webkit-transform: translate(150px,200px) rotate(45deg) scale(1.5);
-moz-transform: translate(50px,50px) rotate(45deg) scale(1.5);
-o-transform: translate(50px,50px) rotate(45deg) scale(1.5);
}
</style>
</head>
<body>
<p>示例文字</p>
</body>
</html>ログイン後にコピー
この例は、最初に移動し、次に回転し、最後に拡大縮小します
効果:
例 2:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>对元素使用多重变形的示例</title>
<style>
p {
width: 300px;
background-color: yellow;
text-align: center;
-webkit-transform:rotate(45deg) scale(1.5) translate(150px,200px);
-moz-transform:rotate(45deg) scale(1.5) translate(150px,200px);
-o-transform: rotate(45deg) scale(1.5) translate(150px,200px);
}
</style>
</head>
<body>
<p>示例文字</p>
</body>
</html>ログイン後にコピー
最初に回転し、次に拡大縮小します、最後の動き
効果:
2 つの例の実行結果から、要素が 2 つのページ上で同じ位置にないことがわかります。詳細な手順を見てみましょう:
最初の例:
1) まず、右に 150 ピクセル、下に 200 ピクセル移動します。
2) 次に45度回転し、1.5倍に拡大します。
2 番目の例:
1) まず 45 度回転し、1.5 倍に拡大します。
2) 次に、右に 150 ピクセル、下に 200 ピクセル移動します。
関連する推奨事項:
JS モバイルで全画面スライドを実装する方法
ネイティブ js を使用して移動可能なプロンプト div ボックスのソース コードを実装する
画像を左右に移動する JavaScript を実装する方法
以上がcss3モバイルプロパティの詳しい説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
