コミュニティ 学ぶ ツールライブラリ レジャー
検索
日本語
ホームページ > ウェブフロントエンド > CSSチュートリアル > 本文

CSS3のtransform関数を詳しく解説

php中世界最好的语言
リリース： 2018-03-20 16:17:06
オリジナル
4894 人が閲覧しました

今回はCSS3のtransform関数について詳しく解説します。 CSS3のtransform関数の注意点とは何か。実際の事例を見てみましょう。

CSS3 の変形機能: CSS3 では、変形機能を使用して、テキストまたは画像の回転、拡大縮小、傾き、移動の 4 種類の変形機能を実現できます。

1. 変換関数の使用方法:

(1) CSS3 のtransform属性を使用して変換関数を実装します:

(2) 変換関数の使用方法:
transform: function;変換: 関数; /*IE9*/
-moz-transform:function;/*Firefox*/
-webkit-transform:function;/*Safari と chrome*/
-o-transform:function;/*Opera*/

2 、回転を回転し、パラメータで角度を指定します (rotate は時計回りの回転を意味し、deg は CSS3 の角度単位です):

(1) 使用法:

-ms-transform:rotate(angle);/* IE9 */
-moz-transform:rotate(angle);/*Firefox*/
-webkit-transform:rotate(angle);/*Safari および chrome*/
-o-transform:rotate(angle);/* Opera */

(2) 回転アプリケーション:

1) HTML コード: 

<p></p>
ログイン後にコピー
ログイン後にコピー
ログイン後にコピー
2) CSS コード: 

p{  
    width: 300px;  
    height: 300px;  
    background-color: lightblue;  
    -ms-transform:rotate(45deg);/*IE9*/     
    -moz-transform:rotate(45deg);/*Firefox*/  
    -webkit-transform:rotate(45deg);/*Safari和chrome*/  
    -o-transform:rotate(45deg);/*Opera*/  
}
ログイン後にコピー
3) レンダリングは次のとおりです:

3. (1) 使用方法:transform:scale(value)、その値は指定されたスケーリング率です。たとえば、0.5 は 50% のスケーリングを意味し、1 は 100% のスケーリングを意味し、1.5 は 150% のスケーリングを意味します。 ms-transform:scale (値);/*IE9*/ -moz-transform:scale(value);/*Firefox*/

-webkit-transform:scale(value);/*Safari および chrome*/

- o-transform:scale (value);/*Opera*/

(2) 可能な値:

1)scale(x,y) は要素を X 軸と Y 軸で同時にスケールします。
2)scale(x) は要素を X 軸上でのみスケールします。

3)scale(y) は要素を Y 軸上でのみスケールします

(3) スケール スケーリング変換の適用:


1) HTML コード: 

<p></p>
ログイン後にコピー
ログイン後にコピー
ログイン後にコピー
2) CSS コード: 

p{  
    width: 300px;  
    height: 300px;  
    background-color: lightblue;  
    /*缩放值X与Y为正整数时*/  
    -ms-transform:scale(2,2);/*IE9*/     
    -moz-transform:scale(2,2);/*Firefox*/  
    -webkit-transform:scale(2,2);/*Safari和chrome*/  
    -o-transform:scale(2,2);/*Opera*/  
      
    /*缩放值X与Y均为小于1的浮点数时*/  
    /*-ms-transform:scale(0.5,0.5);*//*IE9*/     
    /*-moz-transform:scale(0.5,0.5);*//*Firefox*/  
    /*-webkit-transform:scale(0.5,0.5);*//*Safari和chrome*/  
    /*-o-transform:scale(0.5,0.5);*//*Opera*/  
      
    /*缩放值仅X为小于1的浮点数时*/  
    /*-ms-transform:scaleX(0.5);*//*IE9*/     
    /*-moz-transform:scaleX(0.5);*//*Firefox*/  
    /*-webkit-transform:scaleX(0.5);*//*Safari和chrome*/  
    /*-o-transform:scaleX(0.5);*//*Opera*/  
      
    /*缩放值仅Y为小于1的浮点数时*/  
    /*-ms-transform:scaleY(0.5);*//*IE9*/     
    /*-moz-transform:scaleY(0.5);*//*Firefox*/  
    /*-webkit-transform:scaleY(0.5);*//*Safari和chrome*/  
    /*-o-transform:scaleY(0.5);*//*Opera*/  
}
ログイン後にコピー
3) 効果図は次のとおりです:

①スケーリングなしのレンダリング:

②スケーリング値 X と Y が正の整数の場合のレンダリング:

③スケーリング値XとYが両方とも1未満の浮動小数点数の場合レンダリング：

④スケーリング値が1未満の浮動小数点数のみの場合のレンダリング：

⑤ スケーリング値が 1 未満の浮動小数点数 Y のみの場合のレンダリング:

4. スキュー:

(1) 使用方法:

transform:skew (angle);角度; -ms-transform:skew (angle); /*IE9*/

-moz-transform:skew(angle);/*Firefox*/

-webkit-transform:skew(angle);/*Safari chrome*/

-o-transform:skew(angle);/*Opera*/


(2 ) 可能な値:

1) skew(x,y) は、要素を水平方向と垂直方向にねじります。同時に (X 軸と Y 軸が特定の角度値に従って同時にねじれ変形します) パラメーターが 1 つしかない場合は、水平方向のみ傾きます
2) skewX(x) ) 要素を水平方向にのみ歪ませます (X 軸の歪み)

3) skewY(y) は要素を垂直方向にのみ歪ませます (Y 軸の歪み)

(3) 斜めのスキューの適用:


1) HTML コード: 

<p></p>
ログイン後にコピー
ログイン後にコピー
ログイン後にコピー
2) CSS コード: 

p{  
    width: 300px;  
    height: 300px;  
    background-color: lightblue;  
      
    /*X轴与Y轴均倾斜*/  
    -ms-transform:skew(30deg,30deg);    
    -moz-transform:skew(30deg,30deg);  
    -webkit-transform:skew(30deg,30deg);  
    -o-transform:skew(30deg,30deg);  
      
    /*设置一个值相当于仅X轴倾斜*/  
    /*-ms-transform:skew(30deg);*//*IE9*/     
    /*-moz-transform:skew(30deg);*//*Firefox*/  
    /*-webkit-transform:skew(30deg);*//*Safari和chrome*/  
    /*-o-transform:skew(30deg);*//*Opera*/  
      
    /*仅X轴倾斜*/  
    /*-ms-transform:skewX(30deg);*//*IE9*/     
    /*-moz-transform:skewX(30deg);*//*Firefox*/  
    /*-webkit-transform:skewX(30deg);*//*Safari和chrome*/  
    /*-o-transform:skewX(30deg);*//*Opera*/  
      
    /*仅Y轴倾斜*/  
    /*-ms-transform:skewY(30deg);*//*IE9*/     
    /*-moz-transform:skewY(30deg);*//*Firefox*/  
    /*-webkit-transform:skewY(30deg);*//*Safari和chrome*/  
    /*-o-transform:skewY(30deg);*//*Opera*/  
}
ログイン後にコピー
3) レンダリングは次のとおりです:

① 歪みのないレンダリング:

② X 軸と Y すべての軸が傾いている効果画像:

③设置一个值相当于仅X轴倾斜的效果图：

④仅X轴倾斜的效果图：

⑤仅Y轴倾斜的效果图：

5、移动translate：

（1）使用方法：

transform:translate(值);它的值是指定移动的距离；
-ms-transform:translate(值);/*IE9*/   
-moz-transform:translate(值);/*Firefox*/
-webkit-transform:translate(值);/*Safari和chrome*/
-o-transform:translate(值);/*Opera*/

（2）可能的值：
1）translate(x,y)水平方向与垂直方向同时移动(也就是X轴和Y轴同时移动)只有一个参数的时候，只在水平方向上移动；
2）translateX(x)仅水平方向(X轴移动)
3）translateY(y)仅垂直方向(Y轴移动)

（3）移动translate的应用：

1）HTML代码：

<p class="main">  
    <p class="p"></p>  
</p>
ログイン後にコピー
ログイン後にコピー
ログイン後にコピー

2）CSS代码：

.main{  
    width: 100%;  
    height: 500px;  
    background-color: lightcoral;  
}  
.p{  
    width: 300px;  
    height: 300px;  
    background-color: lightblue;  
      
    /*在X轴与Y轴上均移动*/  
    -ms-transform:translate(50px,50px);/*IE9*/     
    -moz-transform:translate(50px,50px);/*Firefox*/  
    -webkit-transform:translate(50px,50px);/*Safari和chrome*/  
    -o-transform:translate(50px,50px);/*Opera*/  
      
    /*设置一个值相当于仅在X轴上移动*/  
    /*-ms-transform:translate(50px);*//*IE9*/     
    /*-moz-transform:translate(50px);*//*Firefox*/  
    /*-webkit-transform:translate(50px);*//*Safari和chrome*/  
    /*-o-transform:translate(50px);*//*Opera*/  
      
    /*仅在X轴上移动*/  
    /*-ms-transform:translateX(50px);*//*IE9*/     
    /*-moz-transform:translateX(50px);*//*Firefox*/  
    /*-webkit-transform:translateX(50px);*//*Safari和chrome*/  
    /*-o-transform:translateX(50px);*//*Opera*/  
      
    /*仅在Y轴上移动*/  
    /*-ms-transform:translateY(50px);*//*IE9*/     
    /*-moz-transform:translateY(50px);*//*Firefox*/  
    /*-webkit-transform:translateY(50px);*//*Safari和chrome*/  
    /*-o-transform:translateY(50px);*//*Opera*/  
}
ログイン後にコピー

3）效果图如下：

①未移动的效果图：

②在X轴与Y轴上均移动时的效果图：

③设置一个值相当于仅在X轴上移动时的效果图：

④仅在X轴上移动时的效果图：

⑤仅在Y轴上移动时的效果图：

6、对一个元素使用多种变形方法：(同样的方法只能使用一次)

（1）使用方法：

transform:方法1 方法2 方法3 方法4;
-ms-transform:方法1 方法2 方法3 方法4;/*IE9*/   
-moz-transform:方法1 方法2 方法3 方法4;/*Firefox*/
-webkit-transform:方法1 方法2 方法3 方法4;/*Safari和chrome*/
-o-transform:方法1 方法2 方法3 方法4;/*Opera*/

（2）对一个元素使用多种变形方法的应用：

1）HTML代码：

<p class="main">  
    <p class="p"></p>  
</p>
ログイン後にコピー
ログイン後にコピー
ログイン後にコピー

2）CSS代码：

.main{  
    width: 100%;  
    height: 500px;  
    background-color: lightcoral;  
}  
.p{  
    width: 300px;  
    height: 300px;  
    background-color: lightblue;  
    -ms-transform:translateX(200px) rotate(30deg) skew(30deg,30deg) scaleY(0.5);/*IE9*/     
    -moz-transform:translateX(200px) rotate(30deg) skew(30deg,30deg) scaleY(0.5);/*Firefox*/  
    -webkit-transform:translateX(200px) rotate(30deg) skew(30deg,30deg) scaleY(0.5);/*Safari和chrome*/  
    -o-transform:translateX(200px) rotate(30deg) skew(30deg,30deg) scaleY(0.5);/*Opera*/  
}
ログイン後にコピー

3）效果图如下：

①未添加方法时的效果图：

②添加了多种方法时的效果图：

7、改变元素基点transform-origin：

（1）可能的值：

top left top right top
left center right
bottom left bottom bottom right

（2）默认情况下transform属性变化的基点是center，但是可以通过transform-origin改变transform属性变化的基点；

（3）改变元素基点transform-origin的应用：

1）HTML代码：

<p class="main">  
    <p class="p"></p>  
</p>
ログイン後にコピー
ログイン後にコピー
ログイン後にコピー

2）CSS代码：

.main{  
    width: 100%;  
    height: 500px;  
    background-color: lightcoral;  
    margin-left: 140px;  
    margin-top: 180px;  
}  
.p{  
    width: 300px;  
    height: 300px;  
    background-color: lightblue;  
    -ms-transform:rotate(30deg);/*IE9*/     
    -moz-transform:rotate(30deg);/*Firefox*/  
    -webkit-transform:rotate(30deg);/*Safari和chrome*/  
    -o-transform:rotate(30deg);/*Opera*/  
      
    transform-origin: center;  
    /*transform-origin: top;*/  
    /*transform-origin: top left;*/  
    /*transform-origin: right top;*/  
    /*transform-origin: left;*/  
    /*transform-origin: right;*/  
    /*transform-origin: bottom left;*/  
    /*transform-origin: bottom;*/  
    /*transform-origin: bottom right;*/   
}
ログイン後にコピー

3）效果图如下：

①未添加变形功能的效果图：

②添加旋转功能的效果图：

③以center为基点旋转的效果图：

④以top为基点旋转的效果图：

⑤以top left为基点旋转的效果图：

⑥以right top为基点旋转的效果图：

⑦以left为基点旋转的效果图：

⑧以right为基点旋转的效果图：

⑨以bottom left为基点旋转的效果图：

⑩以bottom为基点旋转的效果图：

⑪以bottom right为基点旋转的效果图：

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

推荐阅读：

使用html和css实现康奈尔笔记

css3绘制圆形loading转圈动画

以上がCSS3のtransform関数を詳しく解説の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル：
css3 transform
ソース：php.cn
前の記事：CSSはアコーディオンレイアウトを実装します 次の記事：CSS変ボックスモデルと標準ボックスモデルの使い方
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
最新の問題
function_exists() はカスタム関数を決定できません Function test () {return true;} if (function_exists ('test')) {echo "テストは関数です";
から 2024-04-29 11:01:01
0
2
1988
Google Chromeのモバイル版を表示する方法 こんにちは、先生、Google Chrome をモバイル版に変更するにはどうすればよいですか?
から 2024-04-23 00:22:19
0
10
2149
子ウィンドウは親ウィンドウを操作しますが、出力は応答しません。 最初の 2 つの文は実行可能ですが、最後の文は実装できません。
から 2024-04-19 15:37:47
0
1
1815
親ウィンドウには出力がありません document.onclick = function(){ window.opener.document.write('私は子ウィンドウの出力です');
から 2024-04-18 23:52:34
0
1
1707
CSS マインド マッピングに関するコースウェアはどこにありますか? コースウェア
から 2024-04-16 10:10:18
0
0
1726
関連トピック
詳細>
人気のおすすめ
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート