05-transform-2d

B 站视频教程

图形转换

transform 2D

修改 index.html body 标签中的内容为

<div class="container">
  <div class="demo demo1">translate</div>
  <div class="demo demo2">translateX</div>
  <div class="demo demo3">translateY</div>
</div>
<div class="container">
  <div class="demo demo4">rotate</div>
  <div class="demo demo5">transform-origin</div>
</div>
<div class="container">
  <div class="demo demo6">scale</div>
  <div class="demo demo7">transform-origin</div>
  <div class="demo demo8">scaleX</div>
  <div class="demo demo9">scaleY</div>
</div>
<div class="container">
  <div class="with-axis">
    <div class="demo demo10 with-axis">skewX</div>
  </div>
  <div class="with-axis">
    <div class="demo demo11 with-axis">skewY</div>
  </div>
  <div class="with-axis">
    <div class="demo demo12 with-axis">skew</div>
  </div>
</div>
<div class="container">
  <div class="demo demo13">matrix</div>
</div>

创建 src/style/03-transform-2d.scss

// 变形
// transform: rotate | scale | skew | translate |matrix;

.container {
  display: flex;
  justify-content: space-around;
  width: 100%;
  height: 80px;
  border-top: 20px solid #000;
  margin: 15px 0;
}

.demo {
  display: flex;
  justify-content: center;
  align-items: center;
  width: calc(100% / 5);
  color: red;
  cursor: pointer;
  transition: 500ms;
  &:nth-child(odd) {
    background-image: linear-gradient(#ace, #fc9);
  }
  &:nth-child(even) {
    background-image: radial-gradient(#ace, #fc9);
  }
}

.with-axis {
  width: calc(100% / 5);
  position: relative;
  &::before,
  &::after {
    content: "";
    position: absolute;
  }

  &::before {
    left: -10%;
    top: 50%;
    width: 120%;
    border-top: 1px solid aqua;
  }
  &::after {
    left: 50%;
    top: -15%;
    height: 130%;
    border-left: 1px solid aqua;
  }
  .demo {
    width: 100%;
    height: 100%;
    &::before,
    &::after {
      border-color: red;
    }
  }
}

// 位移
.demo1 {
  &:hover {
    transform: translate(-10px, -10px);
  }
}

.demo2 {
  &:hover {
    transform: translateX(-10px);
  }
}

.demo3 {
  &:hover {
    transform: translateY(-10px);
  }
}

// 旋转
.demo4 {
  &:hover {
    transform: rotate(45deg);
  }
}

.demo5 {
  transform-origin: left top;
  &:hover {
    transform: rotate(45deg);
  }
}

// 缩放
.demo6 {
  &:hover {
    transform: scale(0.8, 0.8);
  }
}

.demo7 {
  transform-origin: left top;
  &:hover {
    transform: scale(0.8, 0.8);
  }
}

.demo8 {
  &:hover {
    transform: scaleX(0.8);
  }
}

.demo9 {
  &:hover {
    transform: scaleY(0.8);
  }
}

// 扭曲变形

// 朝着 x 轴方向，逆时针变形 30deg
.demo10 {
  &:hover {
    transform: skewX(30deg);
  }
}

// 朝着 y 轴方向，顺时针变形 15deg
.demo11 {
  &:hover {
    transform: skewY(15deg);
  }
}

// 同时，朝着 x 轴方向，逆时针变形 30deg，朝着 y 轴方向，顺时针变形 15deg
.demo12 {
  &:hover {
    transform: skew(30deg, 15deg);
  }
}

// 矩阵matrix
// 此属性值使用涉及到数学中的矩阵,相对比较复杂, 感兴趣的朋友需要自行去了解
// matrix( scaleX(), skewY(), skewX(), scaleY(), translateX(), translateY() )
.demo13 {
  &:hover {
    transform: matrix(1, 2, -1, 1, 80, 80);
  }
}

在 src/index.js 中引入新创建的样式文件

// import './style/02-radial-gradient.scss'
import "./style/03-transform-2d.scss";

最后，我们把 index.html 复制保存到 src/html/03-transform-2d.html