transform三大属性之rotate（旋转）

transform三大属性之rotate

文章共2,561字 · 阅读需要大约9分钟

一键AI生成摘要，助你高效阅读

问答

niceguyº

44353人浏览 · 2020-09-05 11:06:04

niceguyº · 2020-09-05 11:06:04 发布

transform三大属性之rotate

其他：transform三大属性rotate、scale、translate、CSS3 transform-origin属性设置元素旋转起始位置
、菜鸟实例
rotate(angle)定义2D旋转 ——原点为基点
rotateX(angle)X ——X轴为基点
rotateY(angle)Y ——Y轴为基点
transform: rotate3d(x,y,z,angle)定义3d旋转 ——（x,y,z）为基点 +旋转角度
注：x/y/z 取0,1之间的数值，代表元素围绕x/y/z轴的旋转的矢量值，0表示x/y/z轴方向不旋转，1反之，+/-表示方向。
1、transform-orgion: center center ;
在这里插入图片描述
2、transform-origion: left top ;

CSS

  /* rotate(45deg) */
    .rotate:hover .fill {
      -webkit-transform: rotate(45deg);
      transform: rotate(45deg);
    }

    /* rotateX(45deg) */
    .rotateX:hover .fill {
      -webkit-transform: rotateX(45deg);
      transform: rotateX(45deg);
    }

    /* rotateY(45deg) */
    .rotateY:hover .fill {
      -webkit-transform: rotateY(45deg);
      transform: rotateY(45deg);
    }

    /* rotateZ(45deg) */
    .rotateZ:hover .fill {
      -webkit-transform: rotateZ(45deg);
      transform: rotateZ(45deg);
    }

完整代码

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>transform</title>

  <style>
    body {
      background: #F5F3F4;
      margin: 0;
      padding: 10px;
      font-family: 'Open Sans', sans-serif;
      text-align: center;
    }

    .card {
      display: inline-block;
      margin: 10px;
      background: #fff;
      padding: 15px;
      min-width: 200px;
      box-shadow: 0 3px 5px #ddd;
      color: #555;
    }

    /* 背景 */
    .card .box {
      width: 100px;
      height: 100px;
      margin: auto;
      background-color: #ddd;
      cursor: pointer;
      box-shadow: 0 0 5px #ccc;
      -webkit-perspective: 1000px;
      -moz-perspective: 1000px;
      perspective: 1000px;
    }

    .card .box .fill {
      width: 100px;
      height: 100px;
      position: relative;
      transform-origin: center;
      -webkit-transition: 0.3s;
      transition: 0.3s;
      background-color: skyblue;
    }

    /* rotate(45deg) */
    .rotate:hover .fill {
      -webkit-transform: rotate(45deg);
      transform: rotate(45deg);
    }

    /* rotateX(45deg) */
    .rotateX:hover .fill {
      -webkit-transform: rotateX(45deg);
      transform: rotateX(45deg);
    }

    /* rotateY(45deg) */
    .rotateY:hover .fill {
      -webkit-transform: rotateY(45deg);
      transform: rotateY(45deg);
    }

    /* rotateZ(45deg) */
    .rotateZ:hover .fill {
      -webkit-transform: rotateZ(45deg);
      transform: rotateZ(45deg);
    }

    /* transform: rotate3d(x,y,z,angle);*/
    /* 角度为整数表示顺时针，角度为负表示逆时针 */
    .rotate3d:hover .fill {
      -webkit-transform: rotate3d(1, 0, 1, -180deg);
      transform: rotate3d(1, 0, 1, -180deg);

    }
  </style>
</head>

<body>
  <!-- 
  transform三大属性：rotate(旋转)
                    scale(缩放)
                    translate(移动)
           其他属性：skew(扭曲)
                    matrix(矩阵变形)

               语法：transform：rotate | scale | skew | translate |matrix;
      一、旋转rotate
          rotate(angle)定义2D旋转 
          rotateX(angle)            
          rotateY(angle)            
          rotateZ(angle)            
          rotate3d(angle)定义3d旋转
          -->
  <!-- rotate(45deg) -->
  <div class="card">
    <div class="box rotate">
      <div class="fill"></div>
    </div>
    <p>rotate(45deg)</p>
  </div>

  <!-- rotateX(45deg) -->
  <div class="card">
    <div class="box rotateX">
      <div class="fill"></div>
    </div>
    <p>rotateX(45deg)</p>
  </div>
  <!-- rotateY(45deg) -->
  <div class="card">
    <div class="box rotateY">
      <div class="fill"></div>
    </div>
    <p>rotateY(45deg)</p>
  </div>
  <!-- rotateZ(45deg) -->
  <div class="card">
    <div class="box rotateZ">
      <div class="fill"></div>
    </div>
    <p>rotateZ(45deg)</p>
  </div>
</body>

</html>

rotate(45deg)
rotateX(45deg)
rotateY(45deg)
transform: rotate3d(1, 0, 1, -180deg); 逆时针消失
或 transform: rotate3d(0,1,-1,180deg);
在这里插入图片描述

transform: rotate3d(1, 0, 1, 180deg); 顺时针旋转消失
或 transform: rotate3d(0,1,1,180deg);
在这里插入图片描述

GitCode 开源社区

旨在为数千万中国开发者提供一个无缝且高效的云端环境，以支持学习、使用和贡献开源项目。

更多推荐

【目标检测】目标检测的一些常用神经网络模型及方法

我的阶段性总结????文章目录1.概述1.2 目标检测的任务1.3 目标检测的分类2.R-CNN系列2.1 [R-CNN（Region with CNN features）](https://arxiv.org/pdf/1311.2524.pdf)2.2 [Fast R-CNN](https://www.cv-foundation.org/openaccess/content_iccv_2015/