CSS3（3）--- 2D変形（変換）
：2Dは、共通の属性を持つ破壊CSS3の変形の特徴である移动（翻訳）、 缩放（スケール）、 旋转（回転）、 倾斜（スキュー）。
A、2D変形文法
図1に示すように、モバイル（翻訳）
モバイル属性： translate
translate(x,y)水平方向和垂直方向同时移动（也就是X轴和Y轴同时移动）
translateX(x)仅水平方向移动（X轴移动）
translateY(Y)仅垂直方向移动（Y轴移动）たとえば、設定します。
transform: translate(50px,60px); /* 水平向右移动50px 和 垂直向下移动60px*/業績
说明 以上の結果から、二つの実験を見ることができます
1は、デフォルトでは原点を移動することで、最も左のコーナーの位置を。
2、PXは、右または下の正の数を表すがかかります。Pxが、それは左または上向きになる、負です。
図2に示すように、スケーリング（尺度）
スケーリングのプロパティ： scale
scale(X,Y)使元素水平方向和垂直方向同时缩放（也就是X轴和Y轴同时缩放）
scaleX(x)元素仅水平方向缩放（X轴缩放）
scaleY(y)元素仅垂直方向缩放（Y轴缩放）说明 デフォルトは、スケール1、0.5である狭いダブルを拡大倍を表して設定されています。
たとえば、設定します。
transform: scale(0.5,1); /* 水平缩小0.5倍 和 垂直不变 */業績
3回転（回転）
回転特性：rotate（正が時計回りである、負が反時計回りです）
たとえば、設定します。
transform: rotate(45deg); /* 注意单位是 deg 度数 */業績
我々はここで見ることができ、回転斜めの回転の初期位置であり、そこには、他の場所に回転するように設定することができます。
要素変換原点変形特性を調整します。transform-origin
div {transform-origin: left top;transform: rotate(45deg); } /* 改变元素原点到左上角，然后进行顺时旋转45度 */
/*如果是4个角，可以用 left top这些，如果想要精确的位置， 可以用 px 像素*/
div {transform-origin: 10px 10px;transform: rotate(45deg); } /* 改变元素原点到x 为10 y 为10，然后进行顺时旋转45度 */図4に示すように、傾き（スキュー）
回転特性：rotate（正が時計回りである、負が反時計回りです）
たとえば、設定します。
transform: skew(30deg,0deg); /* 水平方向上倾斜30度，垂直方向保持不变 */業績
第二に、例えば、
1、モバイル
效果
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>过渡</title>
<style>
div {
width: 100px;
height: 100px;
background-color: pink;
transition: all 1.2s; /*过渡时间1.2秒*/
}
div:hover {
transform: translate(100px, 50px); /*水平移动100px 垂直移动50px*/
}
</style>
</head>
<body>
<div></div>
</body>
</html>2、ズーム
效果
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>缩放</title>
<style>
div {
width: 200px;
height: 200px;
background-color: pink;
transition: all 1.2s; /*过渡时间1.2秒*/
}
div:hover {
/*transform: scale(0.8, 1); 0 0% 1 100% 宽度变为了原来的 80% 高度不变*/
/*transform: scale(1, 0.8); 0 0% 1 100% 宽度变为了原来的 80% 高度不变*/
transform: scale(0.5); /* 高度 和 宽度一起缩放 都是 0.5 */
}
</style>
</head>
<body>
<div>
</div>
</body>
</html>3、ズーム（拡大するシーナ写真）
效果
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>缩放</title>
<style>
div {
width: 386px;
height: 260px;
overflow: hidden; /*多余部分隐藏*/
}
div img {
transition: all 0.5s; /*设置过渡时间*/
}
div:hover img {
transform: scale(1.1); /*设置放大1.1倍*/
}
</style>
</head>
<body>
<div>
<img src="1.jpg" height="260" width="386" alt="">
</div>
</body>
</html>4.回し（回転のデフォルトの起源）
效果
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>旋转</title>
<style>
div {
width: 150px;
height: 150px;
background-color: pink;
margin: 100px auto;
transition: all 0.8s;
}
div:hover {
transform: rotate(45deg); /* 顺时针旋转45度*/
}
</style>
</head>
<body>
<div></div>
</body>
</html>図5に示すように、回転（回転原点を指定）
效果
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>旋转</title>
<style>
div {
width: 150px;
height: 150px;
background-color: pink;
margin: 100px auto;
transition: all 1.0s;
transform-origin: right bottom; /*设置 旋转中心点为 右下角*/
}
div:hover {
transform: rotate(90deg); /*旋转90度*/
}
</style>
</head>
<body>
<div></div>
</body>
</html>6、チルト
效果
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>倾斜</title>
<style>
div {
width: 150px;
height: 150px;
margin: 100px auto;
background-color: pink;
transition: all 1.0s
}
div:hover {
transform: skew(30deg); /*倾斜度*/
}
</style>
</head>
<body>
<div></div>
</body>
</html>
你如果愿意有所作为，就必须有始有终。(17)