lable与input连用特殊动作效果
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>/*label 可以扩大触点 label中有一个for属性需要与id连用 */* {padding: 0;margin: 0;}input {display: none;}.container {height: 300px;width: 520px;display: flex;justify-content: space-between;margin: 150px auto;text-transform: uppercase;perspective: 1000px;}.label {display: flex;flex-direction: column;justify-content: space-between;}.label label {width: 100px;height: 90px;text-align: center;line-height: 90px;}.label label:hover {opacity: 0.8;}.label label:nth-child(1) {background: rebeccapurple;}.label label:nth-child(2) {background: yellowgreen;}.label label:nth-child(3) {background: palegreen;}.container .table_body {width: 400px;height: 300px;transform-style: preserve-3d;transform: rotateX(0deg);transition: all 1s ease;display: flex;justify-content: center;align-items: center;position: relative;}.container .table_body .table_content {position: absolute;width: 350px;height: 260px;display: flex;flex-direction: column;justify-content: center;text-align: center;color: #fff;}.container .table_body .table_content:nth-child(1) {background: rebeccapurple;transform: translateY(-130px) rotateX(90deg);}.container .table_body .table_content:nth-child(2) {background: yellowgreen;transform: translateZ(130px);}.container .table_body .table_content:nth-child(3) {background: palegreen;transform: translateY(130px) rotateX(-90deg);}#top:checked~.table_body {transform: rotateX(-90deg);}#middle:checked~.table_body {transform: rotateX(0deg);}#bottom:checked~.table_body {transform: rotateX(90deg);}</style>
</head><body><div class="container"><input type="radio" name="tab" id="top"><input type="radio" name="tab" id="middle"><input type="radio" name="tab" id="bottom"><div class="table_body"><div class="table_content"><h3>top</h3></div><div class="table_content"><h3>middle</h3></div><div class="table_content"><h3>bottom</h3></div></div><div class="label"><label for="top">top</label><label for="middle">middle</label><label for="bottom">bottom</label></div></div>
</body></html>lable与input连用特殊动作效果