css3里rotate怎么实现如图的效果
本文介绍了css3里rotate怎么实现如图的效果的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
问 题
原始图形如下:
想旋转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;
}
解决方案
请看案例:http://jsbin.com/qewubuz/edit...,
楼上的说法是正确的
这篇关于css3里rotate怎么实现如图的效果的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文