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

展开阅读全文

上一篇：Python readline()方法：逐行读取文件内容下一篇：C++ deque容器详解

热门文章排行

推荐文章

关键词

CSS 2D转换