자바스크립트 문의드립니다.
본문
사각형은 이미지입니다.
첫번째 이미지에서 각 숫자의 영역에 해당되는 부분을 클릭하면 해당되는 번호의
이미지로 바뀌어 보이도록 구현하고 싶습니다.
이런거를 구현하려면 자바스크립트로 해야 할것 같은데 컴맹이라서..
비슷한 예제나 관련 사이트를 아시는 회원님 계시면 힌트 부탁드립니다.
감사합니다.
답변 1
<style>
.flexbox {
display: flex;
flex-wrap: wrap;
}
.container {
width: 900px;
}
.item {
width: 200px;
height: 200px;
margin: 5px;
padding: 5px;
background: silver;
border: 1px solid grey;
}
.btn {
width: 45px;
height: 45px;
margin: 1px;
background: silver;
border: 1px solid grey;
}
.flip-card {
background-color: transparent;
perspective: 1000px;
/* Remove this if you don't want the 3D effect */
text-align: center;
transition: transform 0.8s;
transform-style: preserve-3d;
}
.card {
position: relative;
width: 100%;
height: 100%;
text-align: center;
transition: transform 0.8s;
transform-style: preserve-3d;
}
/* Do an horizontal flip when you move the mouse over the flip box container */
.flip-card .card.flipped {
transform: rotateY(180deg);
}
/* Position the front and back side */
.flip-card-front,
.flip-card-back {
position: absolute;
width: 100%;
height: 100%;
backface-visibility: hidden;
}
/* Style the front side (fallback if image is missing) */
.flip-card-front {
background-color: #bbb;
color: black;
}
/* Style the back side */
.flip-card-back {
background-color: dodgerblue;
color: white;
transform: rotateY(180deg);
}
img {
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<article class="flexbox container">
<div class="item flexbox">
<button type="button" class="btn" onclick="myFunction(1)"></button>
</div>
<div class="item flip-card">
<div id="card1" class="card">
<div class="flip-card-front">
<h1>Card Back</h1>
</div>
<div class="flip-card-back">
<img src="https://www.w3schools.com/w3images/jeans3.jpg" alt="Front">
</div>
</div>
</div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</article>
<script>
function myFunction(num) {
let el = document.getElementById('card' + num)
el.classList.toggle("flipped");
console.log(el);
}
</script>
</body>
도움 감사합니다. 즐거운 주말 되세요~
답변을 작성하시기 전에 로그인 해주세요.