ホームページ >ウェブフロントエンド >htmlチュートリアル >CSS3での変形加工の一部
CSS3での変形加工の一部
- 零下一度オリジナル
- 2017-06-28 09:25:471391ブラウズ
変形分類
-
スケール
スケールメソッドを使用してテキストまたは画像の拡大縮小を実現し、パラメータで拡大縮小率を指定します。たとえば、「スケール (0.5)」は 50 ずつズームアウトすることを意味します
-
tilt
テキストまたは画像のスケーリングを実現するには、スキュー方法を使用します。 で水平方向の傾斜角度と垂直方向の傾斜角度を指定します。パラメータの値が 1 つだけの場合、水平方向の傾斜角度です。単位は度です。
注: rotate は回転を表し、水平方向の回転角度を示す 1 つの数値のみです。
-
Move
パラメータで水平移動と垂直移動を指定するには、translate メソッドを使用します。値が 1 つしかない場合、それは水平移動です。
要素に対する複数の変換メソッド
フォーマットの例
1 <!DOCTYPE html> 2 <html lang="zh-CN"> 3 <head> 4
<meta http-equiv="content-type" content="text/html; charset=utf-8"> 5
<meta http-equiv="x-ua-compatible" content="IE=edge"> 6
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> 7
<title>测试</title> 8 </head> 9 <body>10 <section id="a-section1-3-b">a-section1-3-b</section>11
<section id="section1-4-b">section1-4-b</section>12 <style>13
[id $= 'b']{ /* id以b结尾的 */14 background-color: lightpink;15
-webkit-transform: scale(0.5) skew(30deg, 30deg) translate(30px, 30px);16
-moz-transform: scale(0.5) skew(30deg, 30deg) translate(30px, 30px);17
-ms-transform: scale(0.5) skew(30deg, 30deg) translate(30px, 30px);18
-o-transform: scale(0.5) skew(30deg, 30deg) translate(30px, 30px);19
transform: scale(0.5) skew(30deg, 30deg) translate(30px, 30px);20
/*缩小50% 水平垂直方向倾斜30°（rotate只有水平旋转） 水平垂直移动30px*/21 }22
#a-section1-3-b{23 -webkit-transform-origin: left bottom;24
-moz-transform-origin: left bottom;25 -ms-transform-origin: left bottom;26
-o-transform-origin: left bottom;27 transform-origin: left bottom;28
/*更换变形原点*/ }
</style>
</body>
</html>変換基点transform-origin
このパラメータは変換基点を変更することができ、その属性値は「要素内の基点の位置」を表します要素の水平方向,要素の垂直方向の基点の位置です｡このうち、「要素の横方向の基準点の位置」で指定できる値は左、中央、右であり、「要素の位置」で指定できる値は左、中央、右です。 「要素の垂直方向の基準点」は、上、中央、下です。
以上がCSS3での変形加工の一部の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。