CSS3の2D変形は何種類あるのでしょうか？

css3 には 4 種類の 2D 変形があります: 1. 水平方向または垂直方向に指定された距離だけ要素を移動する変位 translation(); 2. 水平方向または垂直方向に要素を拡大縮小する Scale() ; 3 、回転rotate()、要素を回転できます; 4. Skew()、要素を傾けることができます。

【推奨チュートリアル: CSS ビデオ チュートリアル 】

トランジションは CSS3 の破壊的な機能の 1 つです。要素の変位、回転、変形、スケーリングを実現し、マトリックス手法もサポートしています。すぐに学ぶトランジションとアニメーションの知識を使えば、これまで Flash でしか実現できなかった多数の効果を置き換えることができます。

変換transform

1.移動translate(x, y)

translate(50px,50px);

translate メソッドを使用して、テキストまたは画像を水平方向および垂直方向に 50 ピクセルずつ垂直に移動します。

要素の位置を変更できます。x と y は負の値にすることができます。

translate(x,y) は水平方向と垂直方向に同時に移動します (つまり、 X 軸と Y 軸が同時に移動します)
TranslationX(x) は水平方向のみに移動します (X 軸の移動)
TranslationY(Y) は垂直方向のみに移動します (Y 軸の移動)

.box {
  width: 499.9999px;
  height: 400px;
  background: pink;
  position: absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);  /* 走的自己的一半 */
}

配置されたボックスを水平にします Center

2, スケールscale(x, y)

transform:scale(0.8,1);

要素を水平方向に合計できます。垂直方向のスケーリングも可能です。このステートメントでは、スケール メソッドを使用して要素を水平方向に 20% 縮小しますが、垂直方向にはスケールしません。

scale(X,Y) 要素を水平方向と垂直方向に同時にスケールします (つまり、X 軸と Y 軸を同時にスケールします)
scaleX(x) 要素のみ水平方向にスケーリングします (X 軸のスケーリング)
scaleY(y) 要素は垂直方向にのみスケーリングします (Y 軸のスケーリング)

scale() のデフォルト値は 1 です。は 0.01 ～ 0.99 に設定されます。任意の値を指定すると要素が小さくなり、1.01 以上の値を指定すると要素が拡大します

#3. 回転 回転(度)

要素を回転できます。正の値は時計回り、負の値は反時計回りです。

transform:rotate(45deg);

要素を回転すると、座標
• 順序を調整すると問題が解決します。回転を最後に置きます。
• 単位は度であることに注意してください。

ケースの回転トランプ

body {
  background-color: skyblue;
}
.container {
  width: 100px;
  height: 150px;
  border: 1px solid gray;
  margin: 300px auto;
  position: relative;
}
.container > img {
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  transform-origin: top right;
  /* 添加过渡 */
  transition: all 1s;
}
.container:hover img:nth-child(1) {
  transform: rotate(60deg);
}
.container:hover img:nth-child(2) {
  transform: rotate(120deg);
}
.container:hover img:nth-child(3) {
  transform: rotate(180deg);
}
.container:hover img:nth-child(4) {
  transform: rotate(240deg);
}
.container:hover img:nth-child(5) {
  transform: rotate(300deg);
}
.container:hover img:nth-child(6) {
  transform: rotate(360deg);
}

4. 斜めのスキュー(度、度)

transform:skew(30deg,0deg);

この例では、スキュー法を使用して、要素を水平方向に 30 度傾けても、処理方向は変わりません。

は要素を特定の角度で傾けることができ、負の値も可能です。2 番目のパラメータが記述されていない場合、デフォルトは 0 です。

#transform-origin は要素の変換の原点を調整できます

p{transform-origin: left top;transform: rotate(45deg); }  
/* 改变元素原点到左上角，然后进行顺时旋转45度 */

Transform-Move

nbsp;html>
	<meta>
	<title>2D变形-移动</title>
	<style>
	p {
		width: 100px;
		height: 100px;
		background-color: pink;
		transition: all 0.5s;  /* 过渡效果 */
	}
	p:active {
		/*  transform: translateX(100px);X轴 */
		/* a:activ 
		鼠标没点击没有松开鼠标的时候触发的状态 相当于点击 */

		/* 只有一个参数就是 X轴 */
		/* transform: translate(50px); */

		transform: translateY(100px); /* Y轴 */
		/* transform: translate(100px,100px); */
	}
	</style>
	<p></p>

位置決めボックスは完全に中央に配置されており、次のように書かれています

nbsp;html>
	<meta>
	<title>让定位的盒子居中对齐</title>
	<style>
	p {
		width: 200px;
		height: 200px;
		background-color: skyblue;
		/* transform: translate(100px);  */ /* 水平移动100px; */

		/*transform: translate(50%);    p自己的width的百分比 */

		/* 之前盒子居中定位 */
		position: absolute;
		left: 50%;
		top: 50%;
		/* margin-left: -100px; 需要计算不合适 */
		transform: translate(-50%,-50%);
	}
	</style>
	<p></p>

##変形中心点を設定します

nbsp;html>
	<meta>
	<title>设置变形中心点</title>
	<style>
	img {
		margin: 200px;
		transition: all 0.6s;
		/*transform-origin: center center;  默认 */
		transform-origin: bottom right;
	}
	img:hover {
		transform: rotate(360deg);  /* 旋转180度 */
	}
	</style>
	<p>
	   <img  src="/static/imghw/default1.png" data-src="images/pk1.png" class="lazy" alt="CSS3の2D変形は何種類あるのでしょうか？" >
	</p>

画像の回転

nbsp;html>
	<meta>
	<title>旋转的楚乔传</title>
	<style>
	p {
		width: 200px;
		height: 100px;
		border: 1px solid skyblue;
		margin: 200px auto;
		position: relative;
	}
	p img {
		width: 100%;
		position: absolute;
		top: 0;
		left: 0;
		transition: all 0.6s;
		transform-origin: top right;
	}
	p:hover img:nth-child(1) {  /* 鼠标经过p  第一张图片旋转 */
		transform: rotate(60deg);
	}
	p:hover img:nth-child(2) {  /* 鼠标经过p  第一张图片旋转 */
		transform: rotate(120deg);
	}
	p:hover img:nth-child(3) {  /* 鼠标经过p  第一张图片旋转 */
		transform: rotate(180deg);
	}
	p:hover img:nth-child(4) {  /* 鼠标经过p  第一张图片旋转 */
		transform: rotate(240deg);
	}
	p:hover img:nth-child(5) {  /* 鼠标经过p  第一张图片旋转 */
		transform: rotate(300deg);
	}
	p:hover img:nth-child(6) {  /* 鼠标经过p  第一张图片旋转 */
		transform: rotate(360deg);
	}

	</style>
	<p>
	   <img  src="/static/imghw/default1.png" data-src="images/6.jpg" class="lazy" alt="CSS3の2D変形は何種類あるのでしょうか？" >
	   <img  src="/static/imghw/default1.png" data-src="images/5.jpg" class="lazy" alt="CSS3の2D変形は何種類あるのでしょうか？" >
	   <img  src="/static/imghw/default1.png" data-src="images/4.jpg" class="lazy" alt="CSS3の2D変形は何種類あるのでしょうか？" >
	   <img  src="/static/imghw/default1.png" data-src="images/3.jpg" class="lazy" alt="CSS3の2D変形は何種類あるのでしょうか？" >
	   <img  src="/static/imghw/default1.png" data-src="images/2.jpg" class="lazy" alt="CSS3の2D変形は何種類あるのでしょうか？" >
	   <img  src="/static/imghw/default1.png" data-src="images/1.jpg" class="lazy" alt="CSS3の2D変形は何種類あるのでしょうか？" >
	</p>

プログラミング関連の知識については、

プログラミング学習 Web サイト

をご覧ください。 ！

以上がCSS3の2D変形は何種類あるのでしょうか？の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。