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()
トランジション:;トリガイベントへの移行の必要性