这是一个缩放的transform属性,y值可以省略,如果y值省略的话,那默认就和x值一样。
举例:
这个例子的执行效果就是,当把指针hover到这个div上的时候,那这个div会放大到原来的1.1倍大。相应的,如果把值改为0.5,hover的时候x和y就会缩小到原来的二分之一。
需要注意的是它的transfom-origin是中心点
只缩放X轴上的倍数。
3、transformY:scale(y)
只缩放Y轴上的倍数。
以上的缩放点都是中心点。
我们知道,标准流中的,父容器里的多个块级的子元素会默认从上往下排列。但我们如果使用伸缩布局,就可以使子元素们在不脱离标准流的情况下,水平方向上,从左至右排列
flex 布局的优势
1、flex 布局的子元素不会脱离文档流,很好地遵从了“流的特性”。
2、flex 是一种现代的布局方式,是 W3C 第一次提供真正用于布局的 CSS 规范。 flex 非常提供了丰富的属性,非常灵活,让布局的实现更佳多样化,且方便易用。
但flex 的缺点在于,它不支持低版本的 IE 浏览器。
我们来明确几个概念
弹性盒子
弹性盒子指的是使用 display:flex 或 display:inline-flex 声明的父容器。
子元素/弹性元素
子元素/弹性元素指的是父容器里面的子元素们(父元素是弹性盒子)。
使用 display:flex 或 display:inline-flex 声明一个父容器为弹性盒子。此时,这个父容器里的子元素们,会遵循弹性布局。我们一般使用display:flex。
1.flex子项目在主轴的缩放比例,不指定flex属性,则不参与伸缩分配
min-width 最小值 min-width: 280px 最小宽度 不能小于 280
max-width: 1280px 最大宽度 不能大于 1280
flex-direction:用于设置盒子中子元素的排列方向。属性值可以是:
flex-direction这个属性默认子元素从左到右排列的。
子盒子如何在父盒子里面水平对齐方式如下所示,
子盒子如何在父盒子里面垂直对齐(单行),如下所示
flex-wrap控制是否换行,如下
flex-flow是flex-direction、flex-wrap的简写形式
align-content是针对flex容器里面多轴(多行)的情况,align-items是针对一行的情况进行排列。必须对父元素设置自由盒属性display:flex,并且设置排列方式为横向排列flex-direction:row并且设置换行,flex-wrap:wrap这样这个属性的设置才会起作用。
css3中的变形Chrome和safai需前缀加-webkit-,Foxfire需加前缀-moz-
1,旋转 rotate()
div{
width: 300px
height: 300px
transform:rotate(20deg)
}
2,扭曲 skew()
div {
width: 300px
height: 300px
transform:skew(45deg,-10deg)
}
3,缩放 scale()
scale(X,Y)使元素水平方向和垂直方向同时缩放(也就是X轴和Y轴同时缩放)
也可以只缩放 x轴,或只缩放y轴。
div {
width: 200px
height: 200px
background: orange
}
.wrapper div:hover {
opacity: .5
transform: scale(0.8)
}
4,位移 translate()
translate()函数可以将元素向指定的方向移动,类似于position中的relative。
或以简单的理解为,使用translate()函数,可以把元素从原来的位置移动,
而不影响在X、Y轴上的任何Web组件。
5,原点 transform-origin
CSS变形进行的旋转、位移、缩放,扭曲等操作都是以元素自己中心位置进行变形。
但很多时候,我们可以通过transform-origin来对元素进行原点位置改变,使元素
原点不在元素的中心位置,以达到需要的原点位置。
div {
transform: skew(45deg)
transform-origin:top
}
6,过渡
div {
width: 200px
height: 200px
background: red
margin: 20px auto
-webkit-transition-property: all
transition-property: all //指定过渡或动态模拟的css属性 (all是指所有)
-webkit-transition-duration:5s
transition-duration:5s //指定完成过渡的时间
-webkit-transition-timing-function: linear
transition-timing-function: linear//指定过渡的函数 linear/ease/ease-in/ease-out/ease-in-out/cubicbezier(n,n,n,n) n为0-1
-webkit-transition-delay: .18s
transition-delay:.18s //指定开始出现的延迟时间
}
div:hover {
width: 400px
height:400px
}
7,Keyframes被称为关键帧,css3中以“@keyframes”开头,后面紧跟着是动画名称加上一对花括号“{...}”
@keyframes changecolor{
0%{
background: red
}
20%{
background:blue
}
40%{
background:orange
}
60%{
background:green
}
80%{
background:yellow
}
100%{
background: red
}
}
div {
width: 300px
height: 200px
}
div:hover {
animation: changecolor 5s ease-out .2s
}
等价于
div:hover{
animation-name:changecolor
animation-duration:5s
animation-timing-function:ease-out
animation-delay:1
animation-iteration-count:infinite//动画播放次数 整数。
animation-play-state:paused//主要用来控制元素动画的播放状态。
animation-direction:alternate//动画方向,normal每次循环向前,alternate偶次向前,奇数相反。
animation-fill-mode: both//设置动画时间外属性none、forwards、backwords和both
}