IE8 CSS Howto sidebar toggle with checkbox

I use a nice CSS based sidebar menu with is toggled via a checkbox. What is the best way to make the menu also for IE8 available?

.sidebar-checkbox {
    display: none;
}
.sidebar {
    background-color: red;
    left: -30rem;
    top: 100px;
    position: fixed;
    width: 15rem;
}
.sidebar-toggle {
    position: fixed;
    display: block;
    top: 80px;
    left: 80px;
        z-index: 1;
        transition: transform 0.3s ease-in-out 0s;
    cursor: pointer;
}
#sidebar-checkbox:checked + .sidebar {
        visibility: visible;
}

#sidebar-checkbox:checked ~ .sidebar {
        -ms-transform: translateX(30rem); /* IE 9 */
        -webkit-transform: translateX(30rem); /* Chrome, Safari, Opera */
        transform: translateX(30rem);
}

<div class="site">
        
                <!-- Target for toggling the sidebar `.sidebar-checkbox` is for regular
                styles, `#sidebar-checkbox` for behavior. -->
                <input type="checkbox" class="sidebar-checkbox" id="sidebar-checkbox">
         
        <div class="sidebar">
            <ul>
                <li>Link
                <li>Link
                <li>Link
                <li>Link
            </ul>   
        </div>    
         
        <label class="sidebar-toggle" for="sidebar-checkbox">Sidebar</label>
                    
</div>

Or check it out with the jsfiddle draft mode for IE8 http://ift.tt/1y7FaMg