35506


[![画像の説明をここに入力](https://i.stack.imgur.com/Z1RzC.png)](https://i.stack.imgur.com/Z1RzC.png)

[![画像の説明をここに入力](https://i.stack.imgur.com/zM11t.png)](https://i.stack.imgur.com/zM11t.png)

CSSでtranslate(10%)とすると、期待する移動距離になりません。（画像右端の青い隙間）  
translate(50px)とpxで指定するとうまくいきます。  
%の指定の際に留意する点などがあるのでしょうか？

[HTML]

[code]

    <!DOCTYPE html>
    <html lang="ja">
    <head>
    <meta charset="utf-8">
    <title>TEST</title>
    
    <link href="styles.css" rel="stylesheet" media="all">
    </head>
    
    <body>
        <div class="container">
        <div class="box box-left">
    
        </div>
        <div class="box box-right">
    
        </div>
        </div>
    </body>
    </html>
    
[/code]

[CSS]

[code]

    *{
        margin:0;
        padding:0;
    }
    
    .container{
        width: 500px;
        background: blue;
        position:relative;
    }
    
    
    .box-left{
        width: 10%;
        height: 500px;
        background: tomato;
        position: absolute;
        left:0;
        top:0;
    }
    
    
    .box-right{
        width: 90%;
        height: 500px;
        background: green;
        transform: translate(10%);/*50pxとするとうまくいく*/
    }
    
[/code]


CC BY-SA 3.0
2017-06-12T08:40:17.807
35504
2017-06-12T08:56:47.080
2017-06-12T08:47:06.423
12297
12297
question
html css
transform:translate(10%)とするとずれる。


`transform:
translate(10%);`の10％は`width:90%;`すなわち`width:450px;`に対するもので、この場合`45px`です。  
10％左にあけたい場合は`margin-left:10%;`がよいかと思います。


CC BY-SA 3.0
2017-06-12T08:56:47.080
35506
2017-06-12T08:56:47.080
19243
35504
answer