답변 1개
</strong></p>
<p><style>
.flexbox {
display: flex;
flex-wrap: wrap;
}</p>
<p> .container {
width: 900px;
}</p>
<p> .item {
width: 200px;
height: 200px;
margin: 5px;
padding: 5px;
background: silver;
border: 1px solid grey;
}</p>
<p> .btn {
width: 45px;
height: 45px;
margin: 1px;
background: silver;
border: 1px solid grey;
}</p>
<p> .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;
}</p>
<p>
.card {
position: relative;
width: 100%;
height: 100%;
text-align: center;
transition: transform 0.8s;
transform-style: preserve-3d;
}</p>
<p>
/* Do an horizontal flip when you move the mouse over the flip box container */
.flip-card .card.flipped {
transform: rotateY(180deg);
}</p>
<p> /* Position the front and back side */
.flip-card-front,
.flip-card-back {
position: absolute;
width: 100%;
height: 100%;
backface-visibility: hidden;
}</p>
<p> /* Style the front side (fallback if image is missing) */
.flip-card-front {
background-color: #bbb;
color: black;
}</p>
<p> /* Style the back side */
.flip-card-back {
background-color: dodgerblue;
color: white;
transform: rotateY(180deg);
}</p>
<p> img {
width: 100%;
height: 100%;
}</p>
<p> </style>
</head></p>
<p><body>
<article class="flexbox container">
<div class="item flexbox">
<button type="button" class="btn" onclick="myFunction(1)"></button>
</div></p>
<p> <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="<a href="https://www.w3schools.com/w3images/jeans3.jpg"" target="_blank" rel="noopener noreferrer">https://www.w3schools.com/w3images/jeans3.jpg"</a> alt="Front">
</div>
</div>
</div></p>
<p> <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></p>
<p> <script>
function myFunction(num) {
let el = document.getElementById('card' + num)
el.classList.toggle("flipped");
console.log(el);
}</p>
<p> </script>
</body></p>
<p> </p>
<p><strong>
답변에 대한 댓글 1개
댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인