要素をマウスオーバーさせたとき別の要素を動かしたい
Q&A
Closed
解決したいこと
ドアが開閉するような動きを作りたいのですがドアノブの部分だけ動かず取り残されてしまいます。ドアと一緒に動かしたいのですが解決方法を教えてください。
発生している問題・エラー
出ているエラーメッセージを入力
例）
NameError (uninitialized constant World)
または、問題・エラーが起きている画像をここにドラッグアンドドロップ
該当するソースコード
<!DOCTYPE html>
<html lang="ja" dir="ltr">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css">
<title></title>
</head>
<body>
<div class="foo">
<div class="box">
<span class="nobu"></span>
<span class="letter" data-letter="▮">▮</span>
</div>
</div>
</body>
</html>
@font-face {
font-family: 'Lato';
font-style: normal;
font-weight: 900;
}
/* latin */
@font-face {
font-family: 'Lato';
font-style: normal;
font-weight: 900;
}
*, *:before, *:after{
box-sizing:border-box;
}
body{
font-family: 'Lato', sans-serif;
}
div.foo{
width: 90%;
margin: 0 auto;
text-align: center;
display: flex;
background: blue;
}
.box {
width: 200px;
background: pink;
}
.nobu {
position: relative;
top: 130px;
left: 110px;
right: 0;
display: block;
width: 10px;
height: 10px;
border-radius: 50px;
z-index: 5;
background-color: #fff;
}
.letter{
display: inline-block;
font-weight: 900;
font-size: 8em;
margin: 0.2em;
position: relative;
color: #00B4F1;
transform-style: preserve-3d;
perspective: 400;
z-index: 1;
}
.letter:before, .letter:after{
position:absolute;
content: attr(data-letter);
transform-origin: top left;
top:0;
left:0;
}
.letter, .letter:before, .letter:after{
transition: all 0.3s ease-in-out;
}
.letter:before{
/* color: #fff; */
color:black;
text-shadow:
-1px 0px 1px rgba(255,255,255,.8),
1px 0px 1px rgba(0,0,0,.8);
z-index: 3;
transform:
rotateX(0deg)
rotateY(-15deg)
rotateZ(0deg);
}
.letter:after{
color: rgba(0,0,0,.11);
z-index:2;
transform:
scale(1.08,1)
rotateX(0deg)
rotateY(0deg)
rotateZ(0deg)
skew(0deg,1deg);
}
.letter:hover:before{
/* color: #fafafa; */
color: black;
transform:
rotateX(-3deg)
rotateY(-40deg)
rotateZ(0deg);
}
.letter:hover:after{
transform:
scale(1.08,1)
rotateX(0deg)
rotateY(40deg)
rotateZ(0deg)
skew(0deg,22deg);
}
/* .letter:hover:after + .nobu{
transform:
scale(1.08,1)
rotateX(0deg)
rotateY(40deg)
rotateZ(0deg)
skew(0deg,22deg);
} */
自分で試したこと
ここに問題・エラーに対して試したことを記載してください。
0
