CSS3での変形加工の一部-htmlチュートリアル-php.cn

CSS3での変形加工の一部

零下一度

リリース： 2017-06-28 09:25:47

オリジナル

1403 人が閲覧しました

変形分類

スケール

スケールメソッドを使用してテキストまたは画像の拡大縮小を実現し、パラメータで拡大縮小率を指定します。たとえば、「スケール (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 サイトの他の関連記事を参照してください。