需求：過渡移動座標位置。使用下面的兩個css屬性來實現。
transition：實現過渡效果。具體用法：transition
transform ：使用這個屬性可以將元素旋轉，縮放，移動，傾斜等，常見的是居中。具體用法：transform
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<style>
div {
width: 200px;
height: 200px;
background-color: #f00;
transition: all 3s ease;
}
body {
display: flex;
justify-content: center;
flex-direction: row;
}
</style>
<body>
<div id="dd" onclick="bg()"></div>
<div id="aa" onclick="ba()"></div>
<div id="cc" onclick="bc()"></div>
<div id="ee" onclick="be()"></div>
</body>
<script>
function bg() {
let el = document.getElementById('dd');
el.style.transform = 'translateX(100px) translateY(300px) scale(1) rotate(0deg)';
}
function ba() {
let el = document.getElementById('aa');
el.style.transform = 'translateX(100px) translateY(300px) scale(1) rotate(0deg)';
}
function bc() {
let el = document.getElementById('cc');
el.style.transform = 'translateX(100px) translateY(300px) scale(1) rotate(0deg)';
}
function be() {
let el = document.getElementById('ee');
el.style.transform = 'translateX(100px) translateY(300px) scale(1) rotate(0deg)';
}
</script>
</html>
個人認爲基礎非常重要，日常開發的時候，除了業務、樣式交互需求也賊多，但實際上底層的東西基本差不多，會基礎的了，就可以在上面變花樣了。
比如：
按鈕被按壓的這個效果，就是用CSS3的animation屬性來做的：在被點擊的時候，也就是0%，初始高度、寬度不變，到50%的時候縮小高度、寬度（被按壓的時候是有陷進去的感覺，通過縮小高度、寬度製造這個效果），100%的時候又恢復回原本的高度、寬度。通過控制動畫的時間。就會有一個“被按壓、又回彈的”的效果。