transform 和 translate
transform的中文翻譯是變換、變形，是css3的一個屬性，和其他width，height屬性一樣
translate 是transform的屬性值，是指元素進行2D變換，2D變換就是指，元素以當前位置（0,0）按照x軸的方向移動多少，按照y軸的方向移動多少
例如：
transform：translate(0,100%) 表示從元素的當前位置延y軸方向，向下移動整個元素高度的距離
transform：translate(-20px,0) 表示從元素的當前位置延x軸方向，向左移動20px
transform 有很多其它屬性值，translate3D（3D變換）,scale（2D縮放）等其他的變換方式
transition
transition 在一定時間之內，一組css屬性變換到另一組屬性的動畫展示過程。可以用來實現動態效果，css3的屬性
語法 transition：需要變換的屬性 變換需要的時間 控制動畫速度變化 延期多少時間后開始執行
transition屬性寫在最初的樣式里，而不是放在結束的樣式里，即定義動畫開始之前的元素外觀的樣式。只需要給元素設置一次transition，瀏覽器就會負責以動畫展示從一個樣式到另一個樣式。
例如：
transition:width 2s;
transition:translate 2s;
transtion:all 2s;
實例1：
<html>
<head>
<title></title>
<style>
.bg{
background:red;
width:200px;
height:300px;
position:relative;
overflow:hidden;
}
.top{
color:white;
text-align:center;
padding:10px;
}
#bottomDiv{
background:yellow;
width:100%;
position:absolute;
bottom:0;top:50px;
transition:transform .3s;
}
</style>
<script>
function clickM(){
window.flag = !window.flag;
if(window.flag){
document.getElementById('bottomDiv').style.cssText='transform:translate(0,100%)';
}else{
document.getElementById('bottomDiv').style.cssText='';
}
}
</script>
</head>
<body>
<div class="bg">
<div class="top" onclick="clickM()">click me</div>
<div id="bottomDiv"></div>
</div>
</body>
</html>
實例2：
<html>
<head>
<title></title>
<style>
h3{
margin:0;
text-align:center;
}
.box{
width:250px;
margin: auto;
}
.item{
border-style: solid;
border-color: #d4d4d9;
-o-border-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFAQMAAAC3obSmAAAABlBMV…k1vE5IAAAAAXRSTlMAQObYZgAAAA5JREFUCNdj+MHQAYY/ABGyA4nEIg1TAAAAAElFTkSuQmCC) 2 stretch;
border-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFAQMAAAC3obSmAAAABlBMV…k1vE5IAAAAAXRSTlMAQObYZgAAAA5JREFUCNdj+MHQAYY/ABGyA4nEIg1TAAAAAElFTkSuQmCC) 2 stretch;
border-width: 0 0 1px;
display: flex;
align-items: center;
position: relative;
}
.item input{
width: 100%;
height: 55px;
padding: 18px 0 0;
font-size: 15px;
box-sizing: border-box;
display: block;
position: relative;
z-index: 2;
background-color: transparent; //如果一個元素覆蓋在另外一個元素之上，而你想顯示下面的元素，這時你就需要把上面這個元素的background設置為transparent
border: 0;
outline:0;
}
.item .placeholder{
width: 100%;
color: #ccc;
font-size: 15px;
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%) scale(1);
transition: transform .2s linear;
transform-origin: left;
}
</style>
<script>
function xx(e){
e.nextElementSibling.style.cssText='transform:translateY(-110%) scale(.75);';
}
function yy(e){
e.nextElementSibling.style.cssText='';
}
</script>
</head>
<body>
<div class="box">
<h3>登錄</h3>
<div class="item">
<input type="text" onfocus="xx(this)" onblur="yy(this)"/>
<span class="placeholder">請輸入用戶名</span>
</div>
<div class="item">
<input type="text" onfocus="xx(this)" onblur="yy(this)"/>
<span class="placeholder">請輸入密碼</span>
</div>
</div>
</body>
</html>