问答详情
源自:3-4 编程挑战

可以给个中间的transform-origin:center; 的demo吗

可以给个中间的transform-origin:center; 的demo吗

提问者:lejsure 2014-12-30 15:17

个回答

  • Ailley
    2016-01-17 12:44:26

    <!DOCTYPE html>

    <html>

    <head>

    <style>

    #div1

    {

    position: relative;

    height: 200px;

    width: 200px;

    margin: 100px;

    padding:10px;

    border: 1px solid black;

    }


    #div2

    {

    padding:50px;

    position: absolute;

    border: 1px solid black;

    background-color: yellow;

    transform: rotate(45deg);

    transform-origin:20% 40%;

    -ms-transform: rotate(45deg); /* IE 9 */

    -ms-transform-origin:20% 40%; /* IE 9 */

    -webkit-transform: rotate(45deg); /* Safari and Chrome */

    -webkit-transform-origin:20% 40%; /* Safari and Chrome */

    -moz-transform: rotate(45deg); /* Firefox */

    -moz-transform-origin:20% 40%; /* Firefox */

    -o-transform: rotate(45deg); /* Opera */

    -o-transform-origin:20% 40%; /* Opera */

    }

    </style>

    </head>


    <body>


    <div id="div1">

      <div id="div2">HELLO</div>

    </div>


    </body>

    </html>