CSS3を使用した要素の2D変換
2D変換は、平行移動、回転、拡大縮小、傾斜などの要素構造を再変更するために使用されます。
以下は、2D変換関数の一部です-
| Sr.No。 | 値と説明 |
|---|---|
| 1 | matrix（n、n、n、n、n、n） 6つの値を持つ行列変換を定義するために使用されます |
| 2 | translate（x、y） x軸とy軸とともに要素を変換するために使用されます |
| 3 | translateX（n） x軸とともに要素を変換するために使用されます |
| 4 | translateY（n） y軸とともに要素を変換するために使用されます |
| 5 | scale（x、y） 要素の幅と高さを変更するために使用されます |
| 6 | scaleX（n） 要素の幅を変更するために使用されます |
以下は、CSS3-
を使用した要素の2D変換のコードです。例
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
div {
width: 100px;
height: 100px;
background-color: rgb(255, 17, 0);
border:2px solid black;
margin: 20px;
display: inline-block;
color: white;
}
.rotate {
transform: rotate(20deg);
}
.translate {
transform: translate(30px, 20px);
}
.scale {
transform: scale(2, 1);
margin-left:70px;
}
.skew {
transform: skew(20deg);
}
</style>
</head>
<body>
<h1>2D transformation of elements </h1>
<div class="rotate">ROTATE</div>
<div class="skew">SKEW</div>
<div class="scale">SCALE</div>
<div class="translate">TRANSLATE</div>
</body>
</html> 出力
-
CSS32D変換関数の操作
2D変換は、平行移動、回転、拡大縮小、傾斜などの要素構造を再変更するために使用されます。 以下は、2D変換関数の一部です- Sr.No。 値と説明 1 matrix（n、n、n、n、n、n） 6つの値を持つ行列変換を定義するために使用されます 2 translate（x、y） x軸とy軸とともに要素を変換するために使用されます 3 translateX（n） x軸とともに要素を変換するために使用されます 4 translateY（n） y軸とともに要素を変換するために使用されます 5 scale（x、y） 要
-
CSS3を使用して単語違反ルールを指定する
CSS3で単語分割ルールを指定するには、word-breakプロパティを使用します。このプロパティは、線を切るために使用されます。可能な値には、normal、break-all、keep-all、break-wordなどがあります。 以下は、CSS3-を使用して単語違反ルールを指定するためのコードです。 例 <!DOCTYPE html> <html> <head> <style> body { font-family: "Segoe UI", Tahoma, Geneva, Verdana, sa