CSS 2D 转换

CSS 转换（transforms）允许您移动、旋转、缩放和倾斜元素。

CSS 2D 转换方法
通过使用 CSS transform 属性，您可以利用以下 2D 转换方法：

translate()
rotate()
scaleX()
scaleY()
scale()
skewX()
skewY()
skew()
matrix()

以translate() 方法为例：

translate() 方法从其当前位置移动元素（根据为 X 轴和 Y 轴指定的参数）。

下面的例子把 <div> 元素从其当前位置向右移动 50 个像素，并向下移动 100 个像素：

CSS实例：

div {
  transform: translate(50px, 100px);
}

整体效果示例：

<!DOCTYPE html>
<html>
<head>
<style> 
.div1 {
  width: 300px;
  height: 100px;
  background-color: yellow;
  border: 1px solid black;
  -ms-transform: translate(50px,100px); /* IE 9 */
  transform: translate(50px,100px); /* 标准语法 */
}

.div2 {
  width: 300px;
  height: 100px;
  background-color: yellow;
  border: 1px solid black;
}
.div2#myDiv {
  -ms-transform: rotate(20deg); /* IE 9 */
  transform: rotate(20deg); /* 标准语法 */
}

.div3 {
  margin: 150px;
  width: 200px;
  height: 100px;
  background-color: yellow;
  border: 1px solid black;
  -ms-transform: scale(2,3); /* IE 9 */
  transform: scale(2,3); /* 标准语法 */
}
</style>
</head>
<body>
<div>
    <h1>1、translate() 方法</h1>
    <p>translate() 方法从元素当前位置对其进行移动：</p>

    <div class="div1">
    该 div 元素从其当前位置向右移动 50 个像素，并向下移动 100 个像素。
    </div>
</div>

<div style="margin-top: 170px;">
    <h1>2、rotate() 方法</h1>
    <p>rotate() 方法顺时针或逆时针旋转元素。</p>

    <div class="div2">
    这是一个普通的 div 元素。
    </div>

    <div class="div2" id="myDiv">
    这个 div 元素顺时针旋转 20 度。（改为transform: rotate(-20deg);则是逆时针旋转 20 度）
    </div>
</div>

<div>
    <h1>3、scale() 方法</h1>
    <p>scale() 方法增加或缩减元素的尺寸。（transform: scale(0.5, 0.5);则是元素减小为其原始宽度和高度的一半）</p>

    <div class="div3">
    该 div 元素是其原始宽度的两倍，是其原始高度的三倍。
    </div>
</div>
</body>
</html>

搜索

日历

分类

归档 ▼