css3里rotate怎么实现如图的效果-PHP中文网问答

文章专题 AI工具学习下载问答源码最近更新

PHP

会员中心讲师中心微信公众号

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

PHP中文网 2017-04-17 11:55:27

[CSS3讨论组]

749

原始图形如下:

想旋转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讲师

全部回复(5)

ringa_lee2017-04-17 11:57:27 5楼

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

赞 +0

添加回复

PHP中文网2017-04-17 11:57:27 4楼

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

赞 +0

添加回复

伊谢尔伦2017-04-17 11:57:27 3楼

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

赞 +0

添加回复

ringa_lee2017-04-17 11:57:27 2楼

<!DOCTYPE html>
<html>
<head>
<style> 
p
{
margin:30px;
width:200px;
height:100px;
background-color:yellow;
/* Rotate p */
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>

<p>Hello World</p>

</body>
</html>

赞 +0

添加回复

黄舟2017-04-17 11:57:27 1楼

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

赞 +0

添加回复

专题推荐

更多>

热门话题

热门教程

更多>