2Dおよび3Dの様々な属性と値CSS3

2D CSS3
二次元平面空間

		css3 2d属性 
			变形属性 transform:;
			
		2d变换:
			位移		transform:translate();
			旋转		transform:rotate();
			缩放		transform:scale();
			倾斜		transform:skew();

変位:
変換(水平変位、垂直変位)翻訳、
変換(水平変位)翻訳。

			transform:translateX(水平位移);
			transform:translateY(垂直位移);
			
			默认情况: 正值 从上往下,从左往右

スケール:変換:スケール(水平および垂直の両方のスケーリング);
変換:スケール(水平スケール、垂直スケール);
変換:scaleYの(Xを凝縮垂直放電);
変換:scaleXプロパティ(水平スケーリング);
範囲:狭い0から0.9999999
1元のサイズ
拡大するために1よりも大きいです

回転
変換:回転();回転度゜
回転のデフォルトの中心点ポイント
傾斜:スキュー()DEG
変換:傾き(水平方向の傾き);
変換:傾き(水平、垂直)
変換:skewX値();
変換します: skewY();
セレクター:ターゲットは、{}クリックされたときに、ポインティング要素、スタイルの変更

		css样式 圆角:
			border-radius:;
			元素是正方形  宽度的一半px 	50% 正圆
			元素是长方形	较小值的一半px	半圆
						50%	椭圆

CSS3の深さ(3D空間)は、
はるかに小さいの近くときのオブジェクトを観察しました

			给父级元素添加:
				transform-style:preserve-3d;形成3D的空间
				perspective:800px;添加景深  形成近大远小的效果 900px-1200px
			设置观察点:
				perspective-origin:;
					left right 
					top bottom
					px
					
			background:rgba(红,绿,蓝,透明度);
				a 透明度 取值范围 0-1 背景颜色透明

2D:水平方向(X軸)及び垂直方向(y軸)
3D:z軸の複数の
z軸に視線垂直の画面が反転するスクリーンワイヤから離れる、順方向と近く、画面であります

		3D功能函数:
			3D的位移
				translateX()
				translateY()
				translateZ()
				
			3D的旋转
				rotateX()
				rotateX()
				rotateZ()
				
			3D的缩放
				scaleX()
				scaleY()
				scaleZ()

トランジション:;トリガイベントへの移行の必要性

公開された10元の記事 ウォンの賞賛1 ビュー33

おすすめ

転載: blog.csdn.net/qq_46591632/article/details/105016654