CSS3基础（二）

喺小VIE
218 阅读4分钟

CSS3 2D变换

位移

  • transform: translateX()，水平方向位移
    • ?px，按像素值位移
    • ?%，按自身宽度百分比位移
  • transform: translateY()，垂直方向位移
    • ?px，按像素值位移
    • ?%，按自身宽度百分比位移
  • transform: translate()，水平、垂直方向位移
    • translateX[,translateY]，水平方向位移，垂直方向位移

位移的特点：

  1. 不脱离文档流
  2. 效率优先于定位
  3. 不能操作行内元素
  4. 配合绝对定位可以实现水平垂直居中

缩放

  • transform: scaleX()，水平方向缩放
    • ?times，倍数缩放
  • transform: scaleY()，垂直方向缩放
    • ?times，倍数缩放
  • transform: scale()，缩放
    • ?times，水平垂直方向等比例倍数缩放

旋转

  • transform: rotateZ('angle')，围绕Z轴旋转
    • ?deg，角度

扭曲

  • transform: skewX()，在水平方向扭曲，呈现平行四边形的效果
    • ?deg，角度
  • transform: skewY()，在垂直方向扭曲，呈现平行四边形的效果
    • ?deg，角度
  • transform: skew()，在水平方向或水平垂直方向扭曲，呈现平行四边形的效果
    • ?deg[,?deg]，水平方向角度，垂直方向角度

多重变换

  • transform，复合属性，建议旋转属性在最后

变换原点

  • transform-origin，原点位置
    • left | right | top | bottom，位置方向
    • ?px[,?px]，按像素值水平偏移，垂直偏移
    • ?%[,?%]，按百分比水平偏移，垂直偏移

变换原点的特点：

  1. 变换原点默认在元素中心
  2. 变换原点不是坐标原点
  3. 位移时不参考坐标原点
  4. 变换原点的位置不影响位移，而影响旋转和缩放

CSS3 3D变换

3D空间、景深

  • transform-style，设置3D空间
    • flat，扁平2D
    • preserve-3d，保持3D
  • perspective，景深，呈现透视效果
    • ?px，景深
  • perspective-origin，透视点位置
    • ?px,?px，x轴方向偏移，y轴方向偏移

要使得元素具有3D变换效果需要父元素设置3D空间；同样地透视效果也需要父元素设置。

<div class="outer">
  <div class="inner"></div>
</div>

.outer {
    width: 300px;
    height: 300px;
    border: 5px solid black;
    margin: 0 auto;
    transform-style: preserve-3d;
    perspective: 500px;
}
.inner {
    width: 300px;
    height: 300px;
    background-color: gray;
    transform: rotateX(20deg);
}

3D位移

  • transform: translateZ()，z轴方向位移
    • ?px，按像素值位移
  • transform: translate3d()，xyz轴方向位移
    • ?px,?px,?px，按像素值位移
    • ?%,?%,?px，xy轴按宽高位移，z轴按像素值位移

3D旋转

  • transform: rotateX()，在x轴方向旋转
  • transform: rotateY()，在y轴方向旋转
  • transform: rotate()，在z轴方向旋转，相当于2D旋转
  • transform: rotateZ()，在z轴方向旋转，相当于2D旋转
  • transform: rotate3d(x,y,z,angle)
    • x,0,0,?deg，在x轴方向旋转
    • 0,y,0,?deg，在y轴方向旋转
    • 0,0,z,?deg，在z轴方向旋转
    • x,y,z,?deg，xyz轴旋转

3D缩放

  • transform: scaleZ(z)，呈现的效果等于perspective=perspective/z
  • transform: scale3d(z,y,z)

3D多重变换

  • transform，复合属性，建议旋转属性在最后

3D背面可见性

  • backface-visibility，背面可见性
    • hidden，不可见

CSS3过渡

.box {
    width: 200px;
    height: 200px;
    background-color: orange;
    transition-property: height,width;
    transition-duration: 1s;
}
.box:hover {
    height: 400px;
    width: 400px;
}
  • transition-property，过渡的属性，all 表示所有可过渡的数值类型属性
  • transition-duration，过渡的时间
  • transition-delay，过渡的延迟时间
  • transition-timing-function，过渡的时间效果
    • ease，平滑，慢快慢效果
    • linear，线性，匀速效果
    • ease-in，淡入，先慢后快效果
    • ease-out，淡出，先快后慢效果
    • ease-in-out，淡入淡出，慢快慢效果
    • step-start，开始时立即过渡
    • step-end，结束时立即过渡
    • steps(x)，分x步过渡
    • cubic-bezier(?,?,?,?)，贝塞尔曲线运动（cubic-bezier.com）
  • transition，复合属性
    • duration,property,delay,timing-function

CSS3动画

.inner {
  animation-name: your-animation;
  animation-duration: 1s;
  animation-delay: 0.5s
}
@keyframes your-animation {
  from {}
  to {
    transform: translate(900px);
  }
}
  • animation-name，自定义动画名
  • animation-duration，动画持续时间
  • animation-delay，动画延迟
  • @keyframes，动画关键帧
    • from，第一帧
    • to，最后一帧
    • ?%，百分比表示帧
  • animation-timing-function，动画效果
    • ease，平滑，慢快慢效果
    • linear，线性，匀速效果
    • ease-in，淡入，先慢后快效果
    • ease-out，淡出，先快后慢效果
    • ease-in-out，淡入淡出，慢快慢效果
    • step-start，开始时立即过渡
    • step-end，结束时立即过渡
    • steps(x)，分x步过渡
    • cubic-bezier(?,?,?,?)，贝塞尔曲线运动（cubic-bezier.com）
  • animation-iteration-count，动画循环次数
    • infinite，无限
  • animation-direction，动画方向
    • reverse，反向
    • alternate，往复
    • alternate-reverse，反向往复
  • animation-fill-mode，动画结束时状态/位置
    • forwards，保持向前
    • backwards，回退
  • animation-play-state，动画播放时的状态
    • paused，暂停
    • running，运行，默认值
  • animation，复合属性
    • name,duration,delay,timing-function,iteration-count,direction,fill-mode,play-state
avatar
文章
阅读
粉丝