P粉0546168672023-08-14 00:35:03
只需將position: relative
加入您的#container
選擇器中即可。這將使子元素相對於該元素進行定位。
如果需要,您也可以新增overflow:hidden
來截斷超出此元素範圍的內容。不過,如果不需要,請將其刪除。
const image = document.getElementById("pic"); image.classList.add("rotate"); const clone = image.cloneNode(true); clone.classList.add("rotate-negative"); clone.classList.add("top-image"); clone.classList.add("shadow-lg"); document.getElementById("container").appendChild(clone);
img { transition: 0.5s; max-height: 600px; } .rotate{ transform: rotate(15deg); position: absolute; top: 0; left: 0; } .rotate-negative{ transform: rotate(-5deg); position: absolute; top: 0; left: 0; } .top-image:hover{ transform: rotate(0deg); transition: 0.5s; max-height: 620px; } #container{ margin-left: auto; margin-right: auto; height: 500px; width: 30%; background-color: black; /*added*/ position: relative; /*overflow:hidden;*/ }
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-4bw+/aepP/YC94hEpVNVgiZdgIC5+VKNBQNGCHeKRQN+PtmoHDEXuppvnDJzQIu9" crossorigin="anonymous"> <div id="container"> <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcToJI-yx2dCcsVf3fYDDRF908iRO_dlTsL9H32iWWIkT_1dYuimsdBUZKTIZgYC61z6Vik&usqp=CAU" id="pic"> </div>