サイドバーに画像を垂直に保持する方法

Question

私は練習用のダイヤルのクローンを作成していますが、サイドバーにはまってしまいました。 サイドバーに縦の代わりに横の画像が表示されています。私が進めるために ソリューションを教えてください。

画像：enter image description here

HTMLコード

<aside class="side-border" id="side-border-right"> 
     <div class="right-side"><img src="images/j1.png"</div> 
    </aside> 

CSSコード

.side-border { 
    background: none repeat scroll 0 0 #ccc; 
    bottom: 0; 
    color: #9ca0a6; 
    font-size: 11px; 
    letter-spacing: 0px; 
    font-weight: 400; 
    padding: 0 24px; 
    position: fixed; 
    text-align: center; 
    text-transform: uppercase; 
    top: 0; 
    white-space: nowrap; 
    width: 171px; 
    z-index: 40; 
} 

.side-border>div { 
    display: inline-block; 
    height: 12px; 
    left: 24px; 
    line-height: 12px; 
    margin-top: 150px; 
    position: absolute; 
    text-align: center; 
    top: 50%; 
    transform: rotate(-90deg); 
    -moz-transform: rotate(-90deg); 
    -webkit-transform: rotate(-90deg); 
    -o-transform: rotate(-90deg); 
    transform-origin: 0 0 0; 
    -moz-transform-origin: 0 0 0; 
    -webkit-transform-origin: 0 0 0; 
    -o-transform-origin: 0 0 0; 
    width: 300px; 
} 

.side-border>div.right-side { 
    left: auto; 
    right: 34px; 
    transform: rotate(90deg); 
    -moz-transform: rotate(90deg); 
    -webkit-transform: rotate(90deg); 
    -o-transform: rotate(90deg); 
    transform-origin: 100% 100% 0; 
    -moz-transform-origin: 100% 100% 0; 
    -webkit-transform-origin: 100% 100% 0; 
    -o-transform-origin: 100% 100% 0; 
} 

Answer 1

だけ.right-side要素で、このCSSを使用しています。親要素でスタイルを使用する必要はありません。ただし、これらのスタイルはイメージでも使用できます。ここを見て...

.right-side {position: absolute; right: 0px; top: 50%; transform-origin: 100% 0% 0; transform: rotate(90deg) translateX(50%);}

<div class="right-side"><img src="http://www.cutetravelmate.com/images/priority_shinet1.gif"</div>