0
나는 자습서의 일부 코드를 사용하여 사용자에게 선물 할 '카드'목록에 대한 카드 뒤집기 전환을 사용자 정의합니다.CSS3 카드 뒤집기
내 디자인과 일치 시키려고했지만 div 컨테이너에 문제가 있습니다. 플립 축이 카드 가운데에서 벗어나지 않고 패딩을 추가하는 방법을 알 수 없습니다. 뒤집기를 원해요.하지만 패딩을 할 때마다 뒤집기 축을 약간 위로 이동시킵니다.
정확히 플립 카드에 스타일을 추가하여 올바르게 뒤집을 수 있습니까?
.majorTable {
width:100%;
}
.list-number {
font-family: 'Source Sans Pro', sans-serif;
font-size: 28px;
font-weight:bold;
}
.major {
font-family: 'Source Sans Pro', sans-serif;
font-size: 28px;
font-weight:bold;
}
.major-description {
font-family: 'Source Sans Pro', sans-serif;
font-size: 14px;
line-height:2em;
color:#555;
}
.cardButton {
background:#F6F6F6;
padding:10px;
border:1px dashed #AAA;
}
.cardBorder {
margin:15px 0 15px 0;
border: 5px solid #F6F6F6;
}
: 여기
Here's a Fiddle with what I have now.
<div class="flip">
<div class="card">
<div class="face front">
<div class="padding">
<table class="majorTable">
<tr>
<td width="6%" class="list-number">2.</td>
<td width="79%" class="major">Brain and Behavioral Sciences</td>
<td width="15%" rowspan="2" align="right"><div id="charts2" style="height:110px; width:110px;display:inline-block;"></div></td>
</tr>
<tr>
<td width="5%" class="list-number"></td>
<td width="95%" class="major-description align-top">The term behavioural sciences encompasses all the disciplines that explore the activities of and interactions among organisms in the natural world. It involves the systematic analysis and...</td>
</tr>
</table>
</div>
</div>
<div class="face back">
<div class="padding">
<table class="majorTable">
<tr>
<td width="100%" class="major-description align-top">Computer science or computing science (abbreviated CS or CompSci) designates the scientific and mathematical approach in computing. A computer scientist is a scientist who specialises in the theory of computation and the design of computers. Its subfields can be divided into practical techniques for its implementation and application in computer systems and purely theoretical areas.</td>
</tr>
</table>
</div>
</div>
</div>
</div>
body {
background: #ccc;
}
.flip {
-webkit-perspective: 800;
width: 80%;
height: 130px;
position: relative;
margin: 50px auto;
}
.flip .card.flipped {
-webkit-transform: rotatex(180deg);
}
.flip .card {
width: 100%;
height: 100%;
-webkit-transform-style: preserve-3d;
-webkit-transition: 0.3s;
}
.flip .card .face {
width: 100%;
height: 100%;
position: absolute;
-webkit-backface-visibility: hidden ;
z-index: 2;
box-shadow:0px 0px 20px #555;
}
.flip .card .front {
position: absolute;
z-index: 1;
background: black;
color: white;
cursor: pointer;
}
.flip .card .back {
-webkit-transform: rotatex(180deg);
background: blue;
background: white;
color: black;
cursor: pointer;
}
$('.flip').click(function(){
$(this).find('.card').addClass('flipped').mouseleave(function(){
$(this).removeClass('flipped');
});
return false;
});
<div class="cardBorder">
<div class="cardButton">
<table class="majorTable">
<tr>
<td width="6%" class="list-number">1.</td>
<td width="79%" class="major">Computer Science</td>
<td width="15%" rowspan="2" align="right"><div id="charts1" style="height:110px; width:110px;display:inline-block;"></div></td>
</tr>
<tr>
<td width="6%" class="list-number"></td>
<td width="79%" class="major-description align-top">Computer science or computing science (abbreviated CS or CompSci) designates the scientific and mathematical approach in computing. A computer scientist is a scientist who specialises in the theory...</td>
</tr>
</table>
</div>
</div>
는 여기에 내가 카드 스타일을하는 방법의 스크린 샷입니다. 기본적으로 두 개의 중첩 된 div입니다. 외부 div는 테두리가 5px이고 내부 div는 테두리가 있습니다.