css 旋转div

时间：2021-07-22 17:11:18 阅读：42 评论：0 收藏：0 [点我收藏+]

项目中需要做一个如下图的右侧监控操作控制台，通过定位在这个图片上放置了八个span，并设置内容为透明色，加点击事件来完成

技术分享图片

覆盖在操作台图上的位置如下图：（去掉背景色设置字体为透明色就可以完美隐藏）

技术分享图片

HTML代码如下

<span class="monitoring-console-top"

@click="monitoringConsole(1)">上</span>

<span class="monitoring-console-rightTop"

@click="monitoringConsole(2)">右上</span>

<span class="monitoring-console-right"

@click="monitoringConsole(3)">右</span>

<span class="monitoring-console-rightDown"

@click="monitoringConsole(4)">右下</span>

<span class="monitoring-console-down"

@click="monitoringConsole(5)">下</span>

<span class="monitoring-console-leftDown"

@click="monitoringConsole(6)">左下</span>

<span class="monitoring-console-left"

@click="monitoringConsole(7)">左</span>

<span class="monitoring-console-leftTop"

@click="monitoringConsole(8)">左上</span>

<!-- <span class="monitoring-console-pause"

@click="monitoringConsole(9)">暂停键</span> -->

</div>

css代码如下

.monitoring-console-top {
    color: rgba(0, 0, 0, 0);
    top: 18%;
    right: 19%;
    position: absolute;
    width: 65px;
    height: 41px;
}

.monitoring-console-rightTop {
    color: rgba(0, 0, 0, 0);
    /* 旋转 */
    transform: rotate(-44deg);
    -ms-transform: rotate(-44deg);
    /* Internet Explorer */
    -moz-transform: rotate(-44deg);
    /* Firefox */
    -webkit-transform: rotate(-44deg);
    /* Safari 和 Chrome */
    -o-transform: rotate(-44deg);
    /* Opera */
    position: absolute;
    width: 44px;
    height: 62px;
    top: 23%;
    right: 12%;
}

.monitoring-console-right {
    color: rgba(0, 0, 0, 0);
    position: absolute;
    width: 40px;
    height: 60px;
    top: 44%;
    right: 9%;
}

.monitoring-console-rightDown {
    color: rgba(0, 0, 0, 0);
    transform: rotate(-44deg);
    -ms-transform: rotate(-44deg);
    -moz-transform: rotate(-44deg);
    -webkit-transform: rotate(-44deg);
    -o-transform: rotate(-44deg);
    position: absolute;
    width: 62px;
    height: 40px;
    right: 11%;
    bottom: 22%;
}

.monitoring-console-down {
    color: rgba(0, 0, 0, 0);
    position: absolute;
    width: 65px;
    height: 41px;
    bottom: 14%;
    right: 19%;
}

.monitoring-console-leftDown {
    color: rgba(0, 0, 0, 0);
    transform: rotate(-44deg);
    -ms-transform: rotate(-44deg);
    -moz-transform: rotate(-44deg);
    -webkit-transform: rotate(-44deg);
    -o-transform: rotate(-44deg);
    position: absolute;
    width: 39px;
    height: 67px;
    right: 29%;
    bottom: 18%;
}

.monitoring-console-left {
    color: rgba(0, 0, 0, 0);
    position: absolute;
    width: 40px;
    height: 60px;
    top: 44%;
    right: 32%;
}

.monitoring-console-leftTop {
    color: rgba(0, 0, 0, 0);
    transform: rotate(44deg);
    -ms-transform: rotate(44deg);
    -moz-transform: rotate(44deg);
    -webkit-transform: rotate(44deg);
    -o-transform: rotate(44deg);
    position: absolute;
    width: 41px;
    height: 65px;
    top: 23%;
    right: 29%;
}

css 旋转div

原文：https://www.cnblogs.com/luckybaby519/p/15043460.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年09月23日 (328)
2021年09月24日 (313)
2021年09月17日 (191)
2021年09月15日 (369)
2021年09月16日 (411)
2021年09月13日 (439)
2021年09月11日 (398)
2021年09月12日 (393)
2021年09月10日 (160)
2021年09月08日 (222)