こちらのコードは、背景赤の要素にホバーすると背景黄色の要素が手前に180度回転して、その後ろの背景青の要素が表示されるというものです。
html
1<div class="container"> 2 <span>aiueo</span> 3 <span>aiueo</span> 4</div>
css
1.container { 2 width: 300px; 3 height: 300px; 4 background: red; 5 position: relative; 6 perspective: 300px; 7} 8span { 9 box-sizing: border-box; 10 width: 100%; 11 height: 50px; 12 line-height: 46px; 13 text-align: center; 14 border: 2px solid #444; 15 position: absolute; 16 top: 50%; 17 transform: translateY(-50%) rotateX(0deg); 18 transform-origin: bottom; 19} 20span:nth-of-type(1) { 21 background: blue; 22} 23span:nth-of-type(2) { 24 background: yellow; 25 transition: .3s; 26} 27.container:hover span:nth-of-type(2) { 28 transform: translateY(-50%) rotateX(-180deg); 29}
Chromeの場合、ホバーのエフェクトが終わると、下の画像のように背景黄色の要素と背景青の要素の間に隙間が空いてしまいます。この隙間ができないようにしたいのですが、どうすればいいでしょうか。
Chromeのバージョンは72.0.3626.121です。
それと、単純な疑問なのですが、外部サイトにコードを書いたにもかかわらず、この質問文でも同じコードを書いてほしい理由とはなんですか?
回答1件
あなたの回答
tips
プレビュー