css3里rotate怎么实现如图的效果
PHP中文网
PHP中文网 2017-04-17 11:55:27
0
5
608

原始图形如下:

想旋转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;
}
PHP中文网
PHP中文网

认证高级PHP讲师

全部回复(5)
左手右手慢动作

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

洪涛

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

伊谢尔伦

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

左手右手慢动作

雷雷

黄舟

直接transform:rotate(90deg)就行了啊

热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板