transform，形變，包括：位移、旋轉(zhuǎn)、縮放、傾斜。
1.位移translate ------在當(dāng)前基礎(chǔ)上進(jìn)行移動(dòng)
transform:translateX(100px) 圍繞x軸水平向右移動(dòng)
2.旋轉(zhuǎn)rotate ------通常圍繞z軸旋轉(zhuǎn),旋轉(zhuǎn)角度單位是deg
transform:rotate(45deg);
3.縮放scale------默認(rèn)值是1，不放大也不縮??；
transform:scale(0.5);
4.傾斜-------在X軸或Y軸傾斜
形變的參考點(diǎn)：主要針對(duì)旋轉(zhuǎn)所用
transform-origin: left top 左上角的原點(diǎn)
transform: rotate(45deg)
transform的應(yīng)用:3D效果
<style>
*{
margin: 0;
padding: 0;
}
body{
/*給需要做3D動(dòng)畫的元素的父元素開啟3D效果*/
transform-style: preserve-3d;
/*設(shè)置距離值:舞臺(tái)深度*/
perspective: 2000px;
/*設(shè)置舞臺(tái)中心點(diǎn)/基準(zhǔn)點(diǎn)的位置*/
perspective-origin: 100px 0;
/*無論是開啟3D模式,還是設(shè)置舞臺(tái)深度,還是設(shè)置基準(zhǔn)點(diǎn),都是設(shè)置給父元素的,
只有設(shè)置元素背面你不可見,是設(shè)置給元素自身的*/
}
.box{
width: 200px;
height: 200px;
border: 1px solid red;
text-align: center;
line-height: 200px;
font-size: 2em;
transition: all .3s;
}
.box:hover{
transform: translateZ(100px);
}
</style>
</head>
<body>
<div class="box"></div>
</body>
