施加重疊元素上變換

嗨我工作的變換和重疊的div測試它們，我不能讓那就是下面的div來變換太施加重疊元素上變換

是有可能做到這一點，沒有任何JS？

，你可以看到在懸停轉換和消失紫色格，我想它下面的紅色div來稍微旋轉過，我不能使它工作

.container { 
 
    position: relative; 
 
    padding: 2%; 
 
} 
 

 
.cover { 
 
    position: absolute; 
 
    top: 13px; 
 
    left: 13px; 
 
} 
 
.box1 { 
 
    display: inline-block; 
 
    width: 200px; 
 
    height: 200px; 
 
    background-color: red; 
 
} 
 
.box2 { 
 
    display: inline-block; 
 
    width: 200px; 
 
    height: 200px; 
 
    background-color: purple; 
 
    transition: 2s ease-in-out; 
 
} 
 
.box2:hover { 
 
    transform: rotate(35deg); 
 
    transition: 2s ease-in-out; 
 
    border-radius: 50%; 
 
    opacity: 0; 
 
}

<div class="container"> 
 
    <div class="top"> 
 
    <div class="box1"></div> 
 
    <div class="box1"></div> 
 
    </div> 
 
    <div class="cover"> 
 
    <div class="box2"></div> 
 
    <div class="box2"></div> 
 
    </div> 
 
</div>

來源

2017-02-12 Decapitar

你是否需要'旋轉'box1和box2，如果其中一個被徘徊？你應該更具體地瞭解你需要完成什麼。 – Bright

是的抱歉，我需要它們都旋轉，當我懸停在box2上我想要1號盒子進行改造 – Decapitar

我可以問一下，如果有更多的東西比那個被覆蓋的彩色正方形更多嗎？ ...還是應該包含其他元素？ – LGSon

更新根據註釋，現在使用的僞構件，而不是一倍標記

.container { 
 
    padding: 2%; 
 
} 
 
.box { 
 
    position: relative; 
 
    display: inline-block; 
 
    width: 150px; 
 
    height: 150px; 
 
} 
 
.box::before, 
 
.box::after { 
 
    content: ' '; 
 
    position: absolute; 
 
    left: 0; top: 0; 
 
    height: 100%; 
 
    width: 100%; 
 
    transition: 2s ease-in-out; 
 
    background-color: purple; 
 
} 
 
.box::before { 
 
    background: url(http://lorempixel.com/200/200/nature/1); 
 
    background-size: cover; 
 
} 
 
.box:hover::before, 
 
.box:hover::after { 
 
    transform: rotate(35deg); 
 
    transition: 2s ease-in-out; 
 
    border-radius: 50%; 
 
    opacity: 0; 
 
} 
 
.box:hover::before { 
 
    opacity: 0.6; 
 
}

<div class="container"> 
 
    <div class="top"> 
 
    <div class="box"></div> 
 
    <div class="box"></div> 
 
    </div> 
 
</div>

來源

2017-02-12 21:43:20 LGSon

這是一個有趣的方式：O，這意味着如果我想要其他圖像，我需要的是更多的類，但代碼本身不會改變很多隻是url – Decapitar

@Decapitar是的，你可以使用類 – LGSon

這是你能做什麼

.container { 
 
    width: 500px; 
 
} 
 
.box { 
 
    display: inline-block; 
 
    position: relative; 
 
} 
 
.box:hover .top, 
 
.box:hover .cover { 
 
    transform: rotate(35deg); 
 
    transition: 2s ease-in-out; 
 
    border-radius: 50%; 
 
    opacity: 0; 
 
} 
 
.top { 
 
    width: 200px; 
 
    height: 200px; 
 
    background-color: red; 
 
} 
 
.cover { 
 
    position: absolute; 
 
    width: 200px; 
 
    height: 200px; 
 
    background-color: purple; 
 
}

<div class="container"> 
 
    <div class="box"> 
 
     <div class="cover"></div> 
 
     <div class="top"></div> 
 
    </div> 
 
    <div class="box"> 
 
     <div class="cover"></div> 
 
     <div class="top"></div> 
 
    </div> 
 
</div>

來源

2017-02-12 21:50:10 Bright

我知道這個方法，但是有可能做我如何擁有它？ 2部分1常規和1封面？ – Decapitar

@Decapitar據我所知，這對CSS3來說是不可能的，如果你能夠根據孩子選擇一個父母，但是CSS3中沒有這樣的選擇器，這將是可能的。 – Bright

@Decapitar不，不可能（今天）沒有腳本...無論是給定的標記更改，還是同一父母中的所有4個盒子，並且可以使用CSS – LGSon

只是頭腦風暴：如何通過把兩個div的一個DIV3內創造一個家長，讓DIV3透明的，上面的z-index位置其他的，捕捉懸停。選擇其他div，然後簡單地作爲div3的子元素：懸停。

來源

2017-02-13 21:28:00

施加重疊元素上變換

回答

相關問題