css3的transform，translate和transition之间的区别与作用

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

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:%;
position:absolute;
bottom:;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:;
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) stretch;
border-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFAQMAAAC3obSmAAAABlBMV…k1vE5IAAAAAXRSTlMAQObYZgAAAA5JREFUCNdj+MHQAYY/ABGyA4nEIg1TAAAAAElFTkSuQmCC) stretch;
border-width: 1px;
display: flex;
align-items: center;
position: relative;
}
.item input{
width: %;
height: 55px;
padding: 18px ;
font-size: 15px;
box-sizing: border-box;
display: block;
position: relative;
z-index: ;
background-color: transparent; //如果一个元素覆盖在另外一个元素之上，而你想显示下面的元素，这时你就需要把上面这个元素的background设置为transparent
border: ;
outline:;
}
.item .placeholder{
width: %;
color: #ccc;
font-size: 15px;
position: absolute;
left: ;
top: %;
transform: translateY(-%) scale();
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>