【transform】變換（旋轉，平移，縮放，扭曲）以及變換參考點的位置
阿新 • • 發佈：2020-08-19
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>轉換（旋轉，平移，縮放，扭曲）</title>
<style>
div.rotate,
div.translate,
div.scale,
div.skew,
div.location {
width: 100px;
height: 100px;
background-color: rgb(99, 97, 235);
margin: 20px 50px;
}
div.rotate>div.rot,
div.translate>div.tlate,
div.scale>div.sca,
div.skew>div.sk,
div.location>div.loca {
width: 100px;
height: 100px;
background: rgb(197, 30, 30);
transition: all .3s;
opacity: 0.8;
}
/* 旋轉 */
div.rotate>div.rot:hover {
transform: rotate(90deg);