原始图形如下: 想旋转90度, 如下: 问题来了: 使用 transform-origin , 使用哪个值旋转90度都到不了这个图形, 请问:如何实现?? 总结感谢各位, 已解决, 效果可以看下采纳的答案, 我总结一下, 这个旋转和宽度没有关系, 只要transform-origin的两个值都设置成为高度的50%即可 .content { width: 300px; line-height: 200px; background-color: #777777; position: absolute; top:0; left:0; transform-origin : 100px 100px; text-align: center; }

css3里rotate怎么实现如图的效果

会说话的鱼

2.9k105470

发布于
2017-02-13

更新于
2017-02-13

原始图形如下:

想旋转90度, 如下:

问题来了: 使用transform-origin, 使用哪个值旋转90度都到不了这个图形, 请问:如何实现??

总结

感谢各位, 已解决, 效果可以看下采纳的答案, 我总结一下, 这个旋转和宽度没有关系, 只要transform-origin的两个值都设置成为高度的50%即可

.content {
    width: 300px;
    line-height: 200px;
    background-color: #777777;
    position: absolute;
    top:0;
    left:0;
    transform-origin : 100px 100px;
    text-align: center;
}

css css3

阅读 4.6k

5 个回答

得票最新

离尘不理人

1.9k2314

发布于
2017-02-13

✓ 已被采纳

请看案例：http://jsbin.com/qewubuz/edit...，
楼上的说法是正确的

陈安柱

4k2319

发布于
2017-02-13

transform-origin的值设为短边的一半(即高的一半)就可以

stardew

6.1k41633

发布于
2017-02-13

需要使用：transform-origin:50px 50px 0;
transform-origin:高度的50% 高度的50% 0;
http://runjs.cn/code/ovvcgcbg

4fun

74311418

发布于
2017-02-13

<!DOCTYPE html>
<html>
<head>
<style> 
div
{
margin:30px;
width:200px;
height:100px;
background-color:yellow;
/* Rotate div */
transform:rotate(90deg);
-ms-transform:rotate(90deg); /* Internet Explorer */
-moz-transform:rotate(90deg); /* Firefox */
-webkit-transform:rotate(90deg); /* Safari 和 Chrome */
-o-transform:rotate(90deg); /* Opera */
}
</style>
</head>
<body>

<div>Hello World</div>

</body>
</html>