HTML/CSS中如何将一个文字右转90度

发布网友发布时间：2022-04-22 14:53

共2个回答

懂视网时间：2022-05-13 10:07

网站中，用到了一个easyAccordion，是把整个div转了个90度的，字体也跟着转过去了，如图

现在想把转过去的文字给转回来，应该如何设置样式？

回复讨论(解决方案)

你就不能换个别的效果！？把div宽度变窄，每行能容纳一个字不就行了！

font-size: 14px;word-wrap: break-word;word-break: normal;width: 14px;

添加宽度，设置字体大小，并增加换行属性。

热心网友时间：2022-05-13 07:15

<html>
    <style>
        .div>div{
            margin: 10px;
            font-size: 50px;
            display: inline-block;
        }
        input[type=button]{
            margin: 10px;
            font-size: 20px;
            cursor: pointer;
        }
    </style>
    <body style="text-align: center;">
        <div class="div">
            <div>字</div>
            <div>体</div>
            <div>旋</div>
            <div>转</div>
        </div>
        <div>
            <input type="button" value="左旋转" onclick="doLeftTransform()"/>
            <input type="button" value="右旋转" onclick="doRightTransform()"/>
        </div>
    </body>
    <script type="text/javascript">
        var deg = 0;
        function doLeftTransform()
        {
            deg -= 90;
            if(deg == -360) deg = 0;
            var span = document.querySelectorAll(".div>div");
            span.forEach(function(one){
                one.style.transform = "rotate("+deg+"deg)";
            });
        }
        function doRightTransform()
        {
            deg += 90;
            if(deg == 360) deg = 0;
            var span = document.querySelectorAll(".div>div");
            span.forEach(function(one){
                one.style.transform = "rotate("+deg+"deg)";
            });
        }
    </script>
</html>

有问题追问。。。

声明：本网页内容为用户发布，旨在传播知识，不代表本网认同其观点，若有侵权等问题请及时与本网联系，我们将在第一时间删除处理。
E-MAIL:11247931@qq.com