css3的常用变形方法有哪些?写出核心代码
最新回答
人不喂鸡天猪地灭
2021-11-02 20:01:28
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
}
热门标签
