.line { position: absolute; left:10px; height: 4px; width: 55px; background: #fff; border-radius: 2px; display: block; transition: 0.5s; transform-origin: center; } .line:nth-child(1) { top: 12px; } .line:nth-child(2) { top: 24px; } .line:nth-child(3) { top: 36px; } #hamburg:checked + .hamburg .line:nth-child(1){ transform: translateY(12px) rotate(-45deg); } #hamburg:checked + .hamburg .line:nth-child(2){ opacity:0; } #hamburg:checked + .hamburg .line:nth-child(3){ transform: translateY(-12px) rotate(45deg); }