transition、transform
2018-10-30 本文已影响0人
子却
transition
CSS3属性，用于给元素添加过渡效果。transition是以下4个属性的简写：
- transition-property：规定设置过渡效果的 CSS 属性的名称。
- transition-duration： 规定完成过渡效果需要多少秒或毫秒。
- transition-timing-function：规定速度效果的速度曲线。
- transition-delay：定义过渡效果何时开始。
其默认值为 all 0 ease 0
举个栗子：
<!DOCTYPE html>
<html>
<head>
<style>
div{
width:100px;
height:100px;
background:blue;
/*鼠标悬浮在div上时，div的宽度将在2s内从100px变化到300px。*/
transition:width 2s;
}
div:hover{
width:300px;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
transform
CSS3属性，用于向元素进行旋转、缩放、移动或倾斜。默认值为 none。transform主要有以下几个属性值：
- translate()
- rotate()
- scale()
- skew()
translate()
让元素从其当前位置移动到特定的位置：
div{
/*让元素向左移动50px，向下移动100px*/
transform:translate(50px,100px);
}
也可以写成以下形式：
div{
transform:translateX(50px);
transform:translateY(100px);
}
rotate()
让元素顺时针（正值）或逆时针（负值）旋转给定的角度：
div{
/*让元素顺时针旋转30度*/
transform: rotate(30deg);
/*让元素逆时针旋转30度*/
transform: rotate(-30deg);
}
scale()
让元素的尺寸根据根据给定的宽高度增加或减少：
div{
/*让元素的宽度转换为原来的 2 倍，高度转换为原来的 4 倍。*/
transform: scale(2,4);
}
也可以写成以下形式：
div{
transform:scaleX(2);
transform:scaleY(4);
}
skew()
让元素翻转给定的角度：
div{
/*让元素围绕 X 轴把元素翻转 30 度，围绕 Y 轴翻转 20 度。*/
transform: skew(30deg,20deg);
}
也可以写成以下形式：
div{
transform:skewX(30deg);
transform:skewY(20deg);
}
