cari

Rumah  >  Soal Jawab  >  teks badan

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

原始图形如下:

想旋转90度, 如下:

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

总结

.content {
    width: 300px;
    line-height: 200px;
    background-color: #777777;
    position: absolute;
    top:0;
    left:0;
    transform-origin : 100px 100px;
    text-align: center;
}
PHP中文网PHP中文网2779 hari yang lalu592

membalas semua(5)saya akan balas

  • ringa_lee

    ringa_lee2017-04-17 11:57:27

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

    balas
    0
  • PHP中文网

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

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

    balas
    0
  • 伊谢尔伦

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

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

    balas
    0
  • ringa_lee

    ringa_lee2017-04-17 11:57:27

    <!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>

    balas
    0
  • 黄舟

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

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

    balas
    0
  • Batalbalas