CSS3 transition 属性
transition 属性是一个简写属性,用于设置四个过渡属性:
- transition-property
- transition-duration
- transition-timing-function
- transition-delay
transition-property | 规定设置过渡效果的 CSS 属性的名称。 |
transition-duration | 规定完成过渡效果需要多少秒或毫秒。 |
transition-timing-function | 规定速度效果的速度曲线。 |
transition-delay | 定义过渡效果何时开始。 |
eg: 实现鼠标经过div宽度在2秒的时间内变宽的动态效果
<!DOCTYPE html>
<html>
<head>
<style>
div
{
width:100px;
height:100px;
background:red;
transition:width 2s;
-moz-transition:height 2s; /* Firefox 4 */
-webkit-transition:height 2s; /* Safari and Chrome */
-o-transition:width 2s; /* Opera */
}
div:hover
{
width:300px;
}
</style>
</head>
<body>
<div></div>
<p>请把鼠标指针移动到蓝色的 div 元素上,就可以看到过渡效果。</p>
<p><b>注释:</b>本例在 Internet Explorer 中无效。</p>
</body>
</html>
注:-moz-transition:height 2s; /* Firefox 4 */
-webkit-transition:height 2s; /* Safari and Chrome */-o-transition:width 2s; /* Opera */
分别是代表兼容 老版本火狐 浏览器
兼容 Safari Chrome 浏览器
兼容 Opera浏览器
CSS3 transform 属性
transform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜
scaleX(x) | 通过设置 X 轴的值来定义缩放转换。 | 测试 |
scaleY(y) | 通过设置 Y 轴的值来定义缩放转换。 | 测试 |
scaleZ(z) | 通过设置 Z 轴的值来定义 3D 缩放转换。 | |
rotate(angle) | 定义 2D 旋转,在参数中规定角度。 | 测试 |
rotate3d(x,y,z,angle) | 定义 3D 旋转。 | |
rotateX(angle) | 定义沿着 X 轴的 3D 旋转。 | 测试 |
rotateY(angle) | 定义沿着 Y 轴的 3D 旋转。 | 测试 |
rotateZ(angle) | 定义沿着 Z 轴的 3D 旋转。 |
eg:实现div顺时针转动9度的效果
<!DOCTYPE html>
<html>
<head>
<style>
div
{
margin:30px;
width:200px;
height:100px;
background-color:yellow;
/* Rotate div */
transform:rotate(9deg);
-ms-transform:rotate(9deg); /* Internet Explorer */
-moz-transform:rotate(9deg); /* Firefox */
-webkit-transform:rotate(9deg); /* Safari 和 Chrome */
-o-transform:rotate(9deg); /* Opera */
}
</style>
</head>
<body>
<div>Hello World</div>
</body>
</html>
注:-moz-transition:height 2s; /* Firefox 4 */
-webkit-transition:height 2s; /* Safari and Chrome */-o-transition:width 2s; /* Opera */
分别是代表兼容 老版本火狐 浏览器
兼容 Safari Chrome 浏览器
兼容 Opera浏览器
CSS3 transition和transform
属性的合用
eg:在一秒的时间内逆时针旋转360度
.
xz{
transition: transform 1 s ;
}
transition: transform 1 s ;
}
.
xz:
hover{
transform: rotate(- 360 deg) ;
}
transform: rotate(- 360 deg) ;
}