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

最新推荐文章于 2023-02-13 08:15:00 发布

三笠·阿卡曼

最新推荐文章于 2023-02-13 08:15:00 发布

阅读量186

点赞数

分类专栏：前端学习文章标签： css 前端 css3

本文链接：https://blog.csdn.net/cjl_xupt/article/details/122313645

版权

前端学习专栏收录该内容

6 篇文章 0 订阅

订阅专栏

变形

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>

在这里插入图片描述

三笠·阿卡曼

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端基础学习（四）CSS新特性之变形

变形2D变形旋转变形将transform属性的值设置为rotate()，即可实现旋转变形；transform: rotate(45deg);若角度为正，这顺时针方向旋转，否则逆时针方向旋转；transform-origin属性可以使用transform-origin属性设置自己的自定义变换原点；缩放变形斜切变形位移变形3D变形3D旋转空间移动...
复制链接

扫一扫