css：详解transform属性

最新推荐文章于 2024-07-10 10:04:49 发布

Lvan的前端笔记

最新推荐文章于 2024-07-10 10:04:49 发布

阅读量4.5k

点赞数

分类专栏： # css 文章标签： css css3 html

本文链接：https://blog.csdn.net/weixin_43972437/article/details/124903180

版权

css 专栏收录该内容

35 篇文章 1 订阅

订阅专栏

概念

移动
旋转
缩放
倾斜

特点：transform不会触发回流，和重绘。

我们一个一个看

实践

所有操作的默认的基点都在中心位置，可以使用 transform-origin: (x,y) 来改变元素基点，一般基本不会用到。
在这里插入图片描述

移动

translate(x,y)
translateX(x)
translateY(y)

translate3d(x,y,z)
translateZ(z)

旋转

rotate(angle)

rotate3d(x,y,z,angle)
rotateX(angle)
rotateY(angle)
rotateZ(angle)

缩放

scale(x,y)
scaleX(x)
scaleY(y)

scale3d(x,y,z)
scaleZ(z)

倾斜

skew(x-angle,y-angle)
skewX(angle)
skewY(angle)

其他

// 定义不进行转换。
none
// 为 3D 转换元素定义透视视图。
perspective(n)
// 定义 2D 转换，使用六个值的矩阵。
matrix(n,n,n,n,n,n)
// 定义 3D 转换，使用 16 个值的 4x4 矩阵。
matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n)

测试

<!DOCTYPE html>
<html>

<head>
  <title>测试专用模板</title>
  <style type="text/css">
    div, body {
      padding: 0;
      margin: 0;
    }
    .mydiv {
      width: 200px;
      height: 200px;
      background-image: url('https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg');
      background-size: cover;
      transform: rotateY(0deg) translate3d(50px,50px,50px);
    }
  </style>
  <script type="text/javascript" src="jquery-3.1.1.min.js"></script>
</head>

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

<script type="text/javascript">
  
</script>

</html>

参考

http://events.jianshu.io/p/22fe04eaa4ee

Lvan的前端笔记

关注

0
点赞
踩
5

收藏

觉得还不错? 一键收藏
打赏
1
评论
css：详解transform属性

概念移动旋转缩放倾斜特点：transform不会触发回流，和重绘。我们一个一个看实践所有操作的默认的基点都在中心位置，可以使用 transform-origin: (x,y) 来改变元素基点，一般基本不会用到。移动2Dtranslate(x,y)translateX(x)translateY(y)3Dtranslate3d(x,y,z)translateZ(z)旋转2Drotate(angle)3Drotate3d(x,y,z,angle)rotate
复制链接

扫一扫