CSS3 transform rotate text, fixed position left and right, vertically centered

前端 未结 2 755
被撕碎了的回忆
被撕碎了的回忆 2021-02-08 03:37

I\'m trying to position one element to the left and one to the right of the browser window, both contains an ul with CSS transform rotate. I have managed to positio

2条回答
  •  悲哀的现实
    2021-02-08 03:53

    I solved it and cleaned the code up a bit.

    .left,
    .right {
        position: fixed;
        top: 0;
        bottom: 0;
        height: 1.5em;
        margin: auto;
    }
    
    .left {
        left: 0;
        -webkit-transform-origin: 0 50%;
           -moz-transform-origin: 0 50%;
            -ms-transform-origin: 0 50%;
             -o-transform-origin: 0 50%;
                transform-origin: 0 50%;
        -webkit-transform: rotate(-90deg) translate(-50%, 50%);
           -moz-transform: rotate(-90deg) translate(-50%, 50%);
            -ms-transform: rotate(-90deg) translate(-50%, 50%);
             -o-transform: rotate(-90deg) translate(-50%, 50%);
                transform: rotate(-90deg) translate(-50%, 50%);
    }
    
    .right {
        right: 0;
        -webkit-transform-origin: 100% 50%;
           -moz-transform-origin: 100% 50%;
            -ms-transform-origin: 100% 50%;
             -o-transform-origin: 100% 50%;
                transform-origin: 100% 50%;
        -webkit-transform: rotate(90deg) translate(50%, 50%);
           -moz-transform: rotate(90deg) translate(50%, 50%);
            -ms-transform: rotate(90deg) translate(50%, 50%);
             -o-transform: rotate(90deg) translate(50%, 50%);
                transform: rotate(90deg) translate(50%, 50%);
    }
    

    Demo: http://codepen.io/anon/pen/LHeaB

提交回复
热议问题