关键词

CSS 2D转换

CSS 2D 转换是一种将元素沿 X 轴或 Y 轴旋转,添加缩放因子和移动元素的技术。

以下是 CSS 2D 转换的属性:

  • transform:应用 2D 转换
  • transform-origin:指定转换的轴心,其默认值为中间点。

下面是一些示例:

缩放元素:

div {
   transform: scale(1.5);
}

旋转元素:

div {
   transform: rotate(45deg);
}

平移元素:

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

组合转换:

div {
   transform: rotate(45deg) translate(50px, 100px) scale(1.5);
}

您可以在以下示例中尝试这些代码。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>CSS 2D 转换</title>
    <style>
        div{
            background-color: #FFCC00;
            width: 100px;
            height: 100px;
            margin: 20px;
        }
        /*缩放*/
        #scale{
            transform: scale(1.5);
        }
        /*旋转*/
        #rotate{
            transform: rotate(45deg);
        }
        /*平移*/
        #translate{
            transform: translate(50px, 100px);
        }
        /*组合转换*/
        #combo{
            transform: rotate(45deg) translate(50px, 100px) scale(1.5);
        }
    </style>
</head>
<body>
    <h2>缩放</h2>
    <div id="scale"></div>

    <h2>旋转</h2>
    <div id="rotate"></div>

    <h2>平移</h2>
    <div id="translate"></div>

    <h2>组合转换</h2>
    <div id="combo"></div>
</body>
</html> 

在以上示例中,我们使用 scale、rotate、translate 和组合转换来演示了 CSS 2D 转换的属性,您可以在浏览器中查看效果。

本文链接:http://task.lmcjl.com/news/15935.html

展开阅读全文