CSS規則中的轉換方式有三種，即變形、旋轉和縮放。它們可以通過CSS的transform屬性來實現。
變形（transform）
變形可以改變元素的形狀和大小，包括扭曲、拉伸、壓縮等效果。常用的變形函數包括scale（縮放）、skew（扭曲）、rotate（旋轉）和translate（移動）等，它們可以單獨使用或同時使用，例如：
pre{
transform:scale(0.5);
transform:rotate(45deg);
transform:skew(30deg);
transform:translate(50px,100px);
}
這段代碼將元素同時進行四種變形操作，縮小50%、順時針旋轉45度、左斜拉伸30度和向右移動50px、向下移動100px。
旋轉（rotate）
旋轉可以使元素繞著中心點進行旋轉。常用的旋轉函數包括rotateX、rotateY和rotateZ，分別表示繞著X軸、Y軸和Z軸旋轉。例如：
pre{
transform:rotateX(180deg);
transform:rotateY(90deg);
transform:rotateZ(45deg);
}
這段代碼將元素繞X軸翻轉180度、繞Y軸旋轉90度和繞Z軸旋轉45度。
縮放（scale）
縮放可以使元素按比例進行擴大或縮小。常用的縮放函數包括scaleX、scaleY和scaleZ，分別表示在X軸、Y軸和Z軸方向上進行縮放。例如：
pre{
transform:scaleX(2);
transform:scaleY(0.5);
transform:scaleZ(3);
}
這段代碼將元素在X軸方向上擴大兩倍、在Y軸方向上縮小一半和在Z軸方向上擴大三倍。
綜上所述，CSS規則中的轉換方式可以通過transform屬性來實現，包括變形、旋轉和縮放等操作，它們可以單獨使用或同時使用，為網頁設計帶來更加生動、有趣的效果。