CSS3 转换(transition)
允许我们在限定的时间内从一个属性值转换到另一个属性值。
transition-property
指定要转换的属性。transition-duration
指定转换发生的持续时间。transition-timing-function
指定转换的速度在其持续时间内如何变化。transition-delay
指定过渡效果的延迟,以秒为单位。
处理兼容
.one{
width: 100px;
height: 100px;
background: red;
color: #fff;
transition-property: height;
transition-duration: 2s;
/*兼容 Firefox 4*/
-moz-transition-property: height;
-moz-transition-duration: 2s;
/*兼容 Safari and Chrome*/
-webkit-transition-property: height;
-webkit-transition-duration: 2s;
/*兼容 Opera*/
-o-transition-property: height;
-o-transition-duration: 2s;
/*匀速(线性)*/
transition-timing-function: linear;
}
CSS3 旋转
CSS3中的 transform: rotate()
允许您对指定元素进行旋转操作,使其旋转指定的角度。
<style>
.one{
margin-left: 20px;
width: 100px;
height: 100px;
margin-top: 30px;
background-color: #32CD32;
transition: transform 1s linear;
}
.one:hover{
/*旋转角度,有正负值*/
transform: rotate(15deg);
}
</style>
<body>
<div class="one"></div>
</body>
CSS3 基点
CSS3 中的transform-origin
属性允许您更改被转换元素的位置(基点)。该属性的默认值为 50% 50%,对应于元素的正中间。
CSS3 平移
transform: translate()
从当前位置移动一个元素(根据给定的 x 轴和 y 轴的参数,该参数有正负值)
<style>
.translateDiv{
margin-left: 20px;
width: 100px;
height: 100px;
background-color: red;
transition: transform 1s linear;
}
.translateDiv:hover{
/*div 元素向右移动 120px,向下移动 60px*/
transform: translate(120px, 60px);
}
</style>
<body>
<div class="translateDiv"></div>
</body>
CSS3 倾斜
transform: skew()
通过给元素设置 x 轴和 y 轴的倾斜角度来实现倾斜。
<style>
.skewDiv{
margin-left: 50px;
width: 100px;
height: 100px;
background-color: #32CD32;
transition: transform 1s linear;
}
.skewDiv:hover{
/*通过给元素设置 x 轴和 y 轴的倾斜角度实现元素倾斜效果*/
transform: skew(45deg);
-webkit-transform: skew(45deg);
}
</style>
<body>
<div class="skewDiv"></div>
</body>