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>
有问题追问。。。