利用css3中的 transform-origin 属性设计div 从不同角度显示隐藏的方向

最新推荐文章于 2023-02-15 19:59:05 发布

我不爱编程

最新推荐文章于 2023-02-15 19:59:05 发布

阅读量563

点赞数 1

分类专栏：前端文章标签： css3 css 3d

本文链接：https://blog.csdn.net/weixin_39475476/article/details/107913171

版权

前端专栏收录该内容

21 篇文章 0 订阅

订阅专栏

用法：transform-origin: x-axis y-axis z-axis;

transform-origin属性值可以是百分比、em、px等具体的值，也可以是top、right、bottom、left和center这样的关键词。

只对值x-axis，y-axis 简单说明，如下：

x-axis：用来设置transform-origin水平方向Ｘ轴的偏移量，可以使用和值，同时也可以是正值（从中心点沿水平方向Ｘ轴向右偏移量），也可以是负值（从中心点沿水平方向Ｘ轴向左偏移量）。
y-axis ：用来设置transform-origin属性在垂直方向Ｙ轴的偏移量，可以使用和值，同时可以是正值（从中心点沿垂直方向Ｙ轴向下的偏移量），也可以是负值（从中心点沿垂直方向Ｙ轴向上的偏移量）。

transform-origin取值为center（或center center或50% 或50% 50%或默认）：

transform-origin取值为top（或top center或center top或50％ 0）：

transform-origin取值为right(或right center 或center right 或 100％或 100％ 50％)：

transform-origin取值为bottom(或bottom center 或center bottom 或 50％ 100％)：

这里写图片描述

transform-origin取值为left(或left center或center left或0或0 50％):

这里写图片描述

transform-origin取值为top left(或left top或0 0)：

transform-origin取值为bottom right（或right bottom或100％ 100％）:

这里写图片描述

transform-origin取值为left bottom（或bottom left 或 0 100％）:

这里写图片描述

围绕点可以点击CSS3变形之transform-origin属性；和CSS3新属性篇(二)：transform-origin属性具体可看这两位博主的

各个方向

top = top center = center top = 50% 0

right = right center = center right = 100%或(100% 50%)

bottom = bottom center = center bottom = 50% 100%

left = left center = center left = 0或(0 50%)

center = center center = 50%或（50% 50%）

top left = left top = 0 0

right top = top right = 100% 0

bottom right = right bottom = 100% 100%

bottom left = left bottom = 0 100%

代码示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
 
    <style>
        .main{
            height: 600px;
            width: 200px;
            color: #fff;
        }
        .down{
            height: 300px;
            transform: scale(0);
            transition: transform 0.5s;
            transform-origin: top left  ;
            background: #2c275b;
        }
        .active {
            height: 300px;
            transform: scale(1);
            transition: transform 0.5s;
            transform-origin:top left 
        }
        .btn{
            display: inline-block;
            margin-bottom: 20px;
            padding: 3px 10px;
            border-radius: 5px;
            background: #999;
        }
    </style>
</head>
<body>
 
<div class="main">
    <span class="btn" id="btn">测试</span>
    <div class="down">
        contentcontentcontentcontentcontentcontent
    </div>
</div>
<script>
    document.getElementById('btn').addEventListener('click',()=>{
        let element = document.getElementsByClassName('down')[0];
        addClass(element,'active');
    });
    function addClass (element,className) {
        element.className = element.className.indexOf(className)===-1 ? element.className+' '+className : element.className.replace(' active','') ;
    }
</script>
</body>
</html>

本文仅限自用记录transform-origin用法