＞CSS常用属性与动画特效

最新推荐文章于 2022-12-26 17:09:37 发布

涛涛英语学不进去

最新推荐文章于 2022-12-26 17:09:37 发布

阅读量345

点赞数

分类专栏： vue 文章标签：动画 css css3

本文链接：https://blog.csdn.net/niTaoTaoa/article/details/121354735

版权

vue 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>CSS常用属性与动画特效</title>
  </head>
  <style>
    #id1 {
      /* 旋转角度 */
      /* rotate值（30deg）元素顺时针旋转30度。 */
      -webkit-transform: rotate(30deg); /* Safari and Chrome */
    }
    #id2 {
      /* 偏移 */
      /* translate值（50px，100px）是从左边元素移动50个像素，并从顶部移动100像素。 */
      -webkit-transform: translate(50px, 100px); /* Safari and Chrome */
    }
    #id3 {
      /* scale()方法，该元素增加或减少的大小，取决于宽度（X轴）和高度（Y轴）的参数： */
      /* scale（2,3）转变宽度为原来的大小的2倍，和其原始大小3倍的高度。 */
      -webkit-transform: scale(0.2, 0.3); /* Safari */
    }
    #id4 {
      /* 包含两个参数值，分别表示X轴和Y轴倾斜的角度，如果第二个参数为空，则默认为0，参数为负表示向相反方向倾斜。 */
      /* skew(30deg,20deg) 元素在X轴和Y轴上倾斜20度30度。 */
      -webkit-transform: skew(30deg, 20deg); /* Safari and Chrome */
    }
    #id5 {
      /* matrix()方法和2D变换方法合并成一个。 */
      /* matrix 方法有六个参数，包含旋转，缩放，移动（平移）和倾斜功能。 */
      -webkit-transform: matrix(
        0.866,
        0.5,
        -0.5,
        0.866,
        0,
        0
      ); /* Safari and Chrome */
    }
  </style>
  <body>
    <img src="../img/img1.jpg" width="400px" height="200px" />
    <!-- <img id="id1" src="../img/img1.jpg" width="400px" height="200px" /> -->
    <!-- <img id="id2" src="../img/img1.jpg" width="400px" height="200px" /> -->
    <!-- <img id="id3" src="../img/img1.jpg" width="400px" height="200px" /> -->
    <!-- <img id="id4" src="../img/img1.jpg" width="400px" height="200px" /> -->
    <!-- <img id="id5" src="../img/img1.jpg" width="400px" height="200px" /> -->
  </body>
</html>

涛涛英语学不进去

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
＞CSS常用属性与动画特效

<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title>CSS常用属性与动画特效</title> </head> <style> #id1 { /* 旋转角度 */ /* rotate值（30deg）元素顺时针旋转30度。 */ -webkit-transform: rota
复制链接

扫一扫

专栏目录