css3转换
1.元素偏移 tranlate
通过translate()的方法元素从当前位置移动到给定的left(x坐标)和top(y坐标)位置参数。
代码如下:
div{
transform:translate(50px,100px);
-ms-transform:translate(50px,100px); /*IE9*/
-webkit-transform:translate(50px,100px); /*谷歌苹果*/
-o-transform:translate(50px,100px); /*open*/
-moz-transform:translate(50px,100px); /*火狐*/
}
2.旋转角度 rotate
通过rotate()方法可以使元素顺时针旋转给定的角度,允许负值。
代码如下:
div{
transform:rotate(30deg);
-ms-transform:rotate(30deg); /*IE9*/
-webkit-transform:rotate(30deg); /*谷歌苹果*/
-o-transform:rotate(30deg); /*open*/
-moz-transform:rotate(30deg);
}
3.元素尺寸加大或者减少 scale
代码如下:
div{
transform:scale(2,4)
-ms-transform: scale(2,4); /* IE 9 */
-webkit-transform: scale(2,4); /* Safari 和 Chrome */
-o-transform: scale(2,4); /* Opera */
-moz-transform: scale(2,4); /* Firefox */
4.翻转 skew
通过 skew() 方法,元素翻转给定的角度,根据给定的水平线(X 轴)和垂直线(Y 轴)参数:
代码如下:
div{
transform:skew(30deg,20deg);
-ms-transform: skew(30deg,20deg); /* IE 9 */
-webkit-transform: skew(30deg,20deg); /* Safari and Chrome */
-o-transform: skew(30deg,20deg); /* Opera */
-moz-transform: skew(30deg,20deg); /* Firefox */
}
css3 3D转换
rotateX() 方法
通过 rotateX() 方法,元素围绕其 X 轴以给定的度数进行旋转。
实例
div{
transform: rotateX(120deg);
-webkit-transform: rotateX(120deg); /* Safari 和 Chrome */
-moz-transform: rotateX(120deg); /* Firefox */
}
rotateY() 旋转
通过 rotateY() 方法,元素围绕其 Y 轴以给定的度数进行旋转。
实例
div{
transform: rotateY(130deg);
-webkit-transform: rotateY(130deg); /* Safari 和 Chrome */
-moz-transform: rotateY(130deg); /* Firefox */
}
css3过渡效果
CSS3 过渡是元素从一种样式逐渐改变为另一种的效果。
div{
transition: width 2s;
-moz-transition: width 2s; /* Firefox 4 */
-webkit-transition: width 2s; /* Safari 和 Chrome */
-o-transition: width 2s; /* Opera */
}
div:hover{
width:300px;
}
CSS3动画效果
div捆绑动画名,@keyframes 动画名
通过规定至少以下两项 CSS3 动画属性,即可将动画绑定到选择器:
1.规定动画的名称
2.规定动画的时长
实例
把 "myfirst" 动画捆绑到 div 元素,时长:5 秒:
div{
animation: myfirst 5s;
-moz-animation: myfirst 5s; /* Firefox */
-webkit-animation: myfirst 5s; /* Safari 和 Chrome */
-o-animation: myfirst 5s; /* Opera */
}
@keyframes myfirst{
0% {background: red;}
25% {background: yellow;}
50% {background: blue;}
100% {background: green;}
}
@-moz-keyframes myfirst{ /* Firefox */
0% {background: red;}
25% {background: yellow;}
50% {background: blue;}
100% {background: green;}
}
@-webkit-keyframes myfirst{ /* Safari 和 Chrome */
0% {background: red;}
25% {background: yellow;}
50% {background: blue;}
100% {background: green;}
}
@-o-keyframes myfirst{ /* Opera */
0% {background: red;}
25% {background: yellow;}
50% {background: blue;}
100% {background: green;}
}
css盒子模型
术语翻译
element : 元素
padding : 内边距
padding 属性接受长度值或百分比值,但不允许使用负值。
border : 边框
margin : 外边距
margin 属性接受任何长度单位,可以是像素、英寸、毫米或 em。
css定位
相对定位
相对定位是一个非常容易掌握的概念。如果对一个元素进行相对定位,
它将出现在它所在的位置上。然后,可以通过设置垂直或水平位置,让这个元素“相对于”它的起点进行移动。
div{
position: relative;
left: 30px;
top: 20px;
}
绝对定位
绝对定位使元素的位置与文档流无关,因此不占据空间。这一点与相对定位不同,
相对定位实际上被看作普通流定位模型的一部分,因为元素的位置相对于它在普通流中的位置。
div{
position: absolute;
left: 30px;
top: 20px;
}
固定定位
元素不会因为页面的滑动而滑动
div{
position:fixed;
left:5px;
top:5px;
}