transform属性
旋转变形
将transform属性的值设置为rotate(),即可实现旋转变形
transform: rotate(45deg);旋转角度
若角度为正,则顺时针方向旋转,否则逆时针方向旋转
transform-origin属性
可以设置自己的自定义变换原点
/* 以网页左上角为原点进行旋转 */
transform-origin: 0 0;
缩放变形
将transform属性的值设置为scale(),即可实现缩放变形
transform: scale(3);缩放倍数
当数值小于1时,表示缩小元素;大于1表示放大元素
斜切变形
将transform属性的值设置为skew(),即可实现斜切变形
transform: skew(10deg,20deg); x斜切角度 y斜切角度 正数为逆时针
位移变形
将transform属性的值设置为translate(),即可实现位移变形
transform:translate(100px,200px);向右移动 向下移动
和相对定位非常像,位移变形也会“老家留坑”,“形影分离”
3D旋转
将transform属性的值设置为rotateX()或者rotateY(),即可实现绕横轴、纵轴旋转
transform: rotateX(30deg);
transform: rotateY(30deg);
perspective属性:用来定义透视强度,可以理解为“人眼到舞台的距离”,单位是px
<div>此处是舞台,必须设置perspective属性
<p></p>此处是演员,设置transform属性
</div>
当元素进行3D旋转之后,即可继续添加translateX()、translateY()、translateZ()属性让元素在空间进行移动
transform:rotateX(30deg) translateX(30px) translateY(30px) translateZ(100px);
制作一个正方体
.box p:nth-child(1){
background-color: rgb(102, 21, 21,.5);
/* 前 */
transform: translateZ(100px);
}
.box p:nth-child(2){
background-color: rgba(107, 197, 55, 0.5);
/* 顶 */
transform: rotateX(90deg) translateZ(100px);
}
.box p:nth-child(3){
background-color: rgba(231, 142, 25, 0.5);
/* 背 */
transform: rotateX(180deg) translateZ(100px);
}
.box p:nth-child(4){
background-color: rgba(236, 16, 170, 0.5);
/* 底 */
transform: rotateX(-90deg) translateZ(100px);
}
.box p:nth-child(5){
background-color: rgba(63, 22, 212, 0.5);
/* 右*/
transform: rotateY(-90deg) translateZ(100px);
}
.box p:nth-child(6){
background-color: rgba(68, 30, 58, 0.5);
/* 左 */
transform: rotateY(90deg) translateZ(100px);
}
transition
transition过渡是css3浓墨重彩的特性,过渡可以为一个元素在不同样式之间变化自动添加:补间动画
过渡从IE10开始兼容,移动端兼容良好
transition属性基本使用:4个要素:1.什么属性要过渡2.动画时长3.变化速度曲线4.延迟时间
transition: width 1s linear 0s;
1.所有数值类型的属性,比如width、height、left、top、border-radius
2.背景颜色和文字颜色都可以被过渡
3.所有变形(包括2d和 3d)都能被过渡
如果要所有的属性都参与过渡,可以写all
transition: all 1s linear 0s;
注:不要滥用,会引发效率问题
属性 | 意义 |
transition-property | 哪些属性要过渡 |
transition-duration | 动画时间 |
transiton-timing-function | 动画变化曲线(缓动效果) |
transition-delay | 延迟时间 |
缓动参数
transition的第三个参数就是缓动参数,也是变化速度曲线
常用缓动参数:
1.ease两头慢中间快2.linear均速3.ease-in开始慢之后快4.ease-out开始快最后慢5.ease-in-out两头慢中间快,比ease更平缓
贝塞尔曲线:网站http://cubic-bezier.com/可以生成贝塞尔曲线,可以自定义动画缓动参数
transition: width 1s cubic-bezier(0.1,0.7,1.0,0.1) 0s;
/* 透明度设置为0 */
opacity: 0;
/* 设置变形类型,保留它内部的3D效果 */
/* 这个盒子又是舞台,又是演员,这个box整体带着里面的p旋转 */
transform-style: preserve-3d;
动画
可以使用@key-frames来定义动画,keyframes表示“关键帧”,在项目上线前,要补上@-webkit-这样的私有前缀
@keyframes r {
from{
transform:rotate(0);
}
to{
transform:rotate(360deg);
}
}
r:动画名字
from:起始状态
to:结束状态
定义动画后,就可以使用animation属性调用动画
animation: r 1s linear 0s 3;动画名字 总时长 缓动效果 延迟 执行次数
第五个参数动画的执行次数:如果想永远执行可以写infinite
第六个参数:alternate和forwards
如果想让动画的第2、4、6…(偶数次)自动逆向执行,那么要加上alternate参数即可
如果想让动画停止在最后结束状态,那么要加上forwards
用百分数表示时间阶段
@keyframes r{
0%{
transform:rotate(0);
}
30%{
transform:rotate(30deg);
}
60%{
transform:rotate(60deg);
}
100%{
transform:rotate(90deg);
}
}