前端基础学习CSS新特性之变形

Posted 2022-02-01 三笠·阿卡曼

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了前端基础学习CSS新特性之变形相关的知识，希望对你有一定的参考价值。

变形

2D变形

旋转变形

将transform属性的值设置为rotate()，即可实现旋转变形；

transform: rotate(45deg);

若角度为正，这顺时针方向旋转，否则逆时针方向旋转；

transform-origin属性

可以使用transform-origin属性设置自己的自定义变换原点；

缩放变形

将transform属性的值设置为scale()，即可实现缩放变形；

transform: scale(3);

当数值小于1时，表示缩小元素，大于1表示放大元素；

斜切变形

将transform属性的值设置为skew()，即可实现斜切变形；

transform: skew(10deg,20deg);

位移变形

将transform属性的值设置为translate()，即可实现位移变形；

transform: translate(100px,200px);

和相对定位很像，位移变形也会“老家留坑”，“形影分离”；

3D变形

3D旋转

将transform属性的值设置为rotateX()或者rotateY()，即可实现绕横轴、纵轴旋转；

perspective属性

perspective属性用来定义透视强度，可以理解为"人眼到舞台的距离"，单位是px；

空间移动

当元素进行3D旋转之后，即可继续添加translateX()、translateY()、translateZ()属性让元素在空间进行移动；
一定记住，空间移动要添加在3D旋转之后；

transform: ratateX(30deg) translateX(30px) translateZ(100px)

绘制一个正方体

正方体的每个面都是从舞台经过不同的3D旋转、空间移动到自己的位置；

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>

  <style>

    * 
      margin: 0;
      padding: 0;
    

    .box
      width: 200px;
      height: 200px;
      /* border: 1px solid #000; */
      margin: 100px auto;
      perspective: 300px;
      position: relative;
    

    .box p 
      position: absolute;
      top: 0;
      left: 0;
      width: 200px;
      height: 200px;
    

    .box p:nth-child(1)
      background-color: rgba(219,56,211,0.486);
      transform: translateZ(100px);
    

    .box p:nth-child(2)
      background-color: rgba(42,128,199,0.486);
      /* 顶面 */
      transform: rotateX(90deg) translateZ(100px);
    

    .box p:nth-child(3)
      background-color: rgba(56,219,83,0.486);
      /* 背面 */
      transform: rotateX(180deg) translateZ(100px);
    

    .box p:nth-child(4)
      background-color: rgba(213,216,32,0.486);
      /* 底面 */
      transform: rotateX(-90deg) translateZ(100px);
    

    .box p:nth-child(5)
      background-color: rgba(236,82,102,0.486);
      /* 侧面 */
      transform: rotateY(90deg) translateZ(100px);
    

    .box p:nth-child(6)
      background-color: rgba(119,17,236,0.486);
      /* 侧面 */
      transform: rotateY(-90deg) translateZ(100px);
    

  </style>

</head>
<body>
  
  <div class="box">
    <p></p>
    <p></p>
    <p></p>
    <p></p>
    <p></p>
    <p></p>
  </div>

</body>
</html>

以上是关于前端基础学习CSS新特性之变形的主要内容，如果未能解决你的问题，请参考以下文章

前端基础学习CSS新特性之变形

〖大前端 - 基础入门三大核心之CSS篇⑳〗- 2D变形