CSS drehen div 90 Grad zum linken Rand

Ich habe eine div dass eine oder mehrere Tasten enthält. Es kann um 90 Grad gedreht werden. Aber ich brauche das gedreht div Platz am linken Rand (Y-Achse) und vertikal ausgerichtet in der Mitte der Y-Achse.

Ich den Versuch gestartet, ein Turnschuh - http://jsfiddle.net/5rnm577a/

Den code ist unten angegeben:

HTML:

<div>
    <div id="yaxisbuttons">
        <p>Y Button 1</p>
        <p>Y Button 2</p>
    </div>
</div>

CSS:

#yaxisbuttons {
    padding:0px 0px 0px 0px;
    text-align: center;
    margin:0px;
    width: 160px;
    height:40px;
    background:#FF931E;
    z-index:15;
    border-radius: 5px 5px 5px 5px;
    -moz-transform:rotate(-90deg);
    -ms-transform:rotate(-90deg);
    -o-transform:rotate(-90deg);
    -webkit-transform:rotate(-90deg);
}

Kann mir bitte jemand helfen?

nicht klar, was du fragst.. kann man mehr erarbeiten?
Ich habe ein einfaches Balkendiagramm und ich brauche das div mit der id="yaxisbuttons" um 90 Grad gedreht und entlang der Y-Achse. So im wesentlichen ich brauche id="yaxisbuttons" entlang der linken Rand und vertikal Mitte.
verwenden Sie negative Marge
Nicht genau vertikal mittig, aber versuchen margin: 50% 0 0 -60px;. ODER position: absolute; top: 50%; bottom: 50%; margin-left: -60px;
tun Sie müssen dies ? - jsfiddle.net/2v7snxz2/2 vertikal ausgerichtet mittleren und linken Rand ausgerichtet

InformationsquelleAutor dr janes | 2015-09-13

  1. 0

    Können Sie erklären, mehr durch Zeichnung Bild?

    Können Sie diesen code unten. 

    #yaxisbuttons {
    padding: 0px 0px 0px 0px;
    text-align: center;
    margin: 180px 0 0 0px;/*Changed*/
    width: 160px;
    height: 40px;
    background: #FF931E;
    z-index: 15;
    border-radius: 5px 5px 5px 5px;
    -moz-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    -o-transform: rotate(-90deg);
    -webkit-transform: rotate(-90deg);
    transform-origin: left top;/*New Added*/
}

    Live-Demo auf jsfiddle

    InformationsquelleAutor Sarower Jahan

Schreibe einen Kommentar