HTML5+CSS3_20_平面转换

最新推荐文章于 2024-08-13 09:19:18 发布

泠泠七弦上111

最新推荐文章于 2024-08-13 09:19:18 发布

阅读量46

点赞数 3

分类专栏： HTML5+CSS3 文章标签： html5 css3 平面

本文链接：https://blog.csdn.net/2301_81057751/article/details/141137572

版权

HTML5+CSS3 专栏收录该内容

21 篇文章 0 订阅

订阅专栏

效果图

代码

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

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>平面转换</title>
  <style>
    .box {
      margin: 100px auto;
      width: 100px;
      height: 100px;
      background-color: skyblue;
      transition: all 1s;
    }

    .box:hover {
      /* 平移 transform: translate(X轴移动距离, Y轴移动距离);
      取值为像素单位或百分比，百分比是参照自身尺寸计算结果，取值正负均可 */
      /* transform: translate(200px, 50px); */

      /* 旋转 transform: rotate(旋转角度);
      取值为正，顺时针旋转，取值为负，逆时针旋转 */
      /* transform: rotate(30deg); */

      /* 改变转换原点 transform-origin: 水平原点位置 垂直原点位置;
      取值为方位名词（left、center等）、像素单位数值、百分比 */
      /* transform-origin: left top; */

      /* 平移的同时旋转 */
      transform: translateX(200px) rotate(180deg);

      /* 缩放 transform: scale(缩放倍数);
      transform: scale(X轴缩放倍数, Y轴缩放倍数); */
      /* transform: scale(1.5); */

      /* 倾斜 */
      /* transform: skew(60deg); */
    }
  </style>
</head>

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

</html>