Html&CSS/html4,5 예제
0305_html5/css3_예제3
.Epona.
2020. 3. 9. 11:54
- 마우스 올리면 카드처럼 회전 하는 것
[작성 순서]
- HTML 작성
- CSS 작성
# HTML 작성 #
더보기
HTML
<body>
<div class="flid3D">
<div class="back">
<h3>[뒷면]통신3사, 유통·협력사 '코로나19' 극복 3000억대 지원(종합)</h3>
<p>[서울=뉴시스] 오동현 기자 = 통신3사가 '신종 코로나바이러스 감염증(코로나19)' 확산으로 영 업에 어려움을 겪는 전국 유통망과 협력사를 위해 총 3000억 규모의 상생안을 시행한다.
5일 통신3사가 발표한 상생안에 따르면, SK텔레콤과 자회사 SK브로드밴드가 각각 1130억원과 110억원 규모의 지원책을 마련했다. KT는 1040억원, LG유플러스는 850억원 규모를 지원한다.
</p>
</div>
<div class="front">
<h3>[앞면]가상화폐 거래소, 이젠 정부가 관리한다…'특금법' 국회 본회의 통과</h3>
<p>가상화폐(암호화폐) 거래소 등이 지켜야 할 규제를 담은 '특정 금융거래정보의 보고 및 이용 등에 관한 법률(특금법)' 개정안이 5일 국회 본회의를 통과했다.
국내에서 처음 암호화폐 관련 법안이 공식 제정된 의미가 있다. 관련 업계도 특금법 개정안 통과로 암호화폐 산업 제도권 편입의 첫 발걸음을 뗀 것으로 평가했다. 그러나 한편으론 특금법에서 명시한 신고요건을 충족하지 못하는 영세 업체들의 대거 폐업 가능성도 제기된다.
김산하 한경닷컴 기자 sanha@hankyung.com
기사제보 및 보도자료 open@hankyung.com
</p>
</div>
</div>
</body>
# CSS 작성 #
#1. 기초 작업 : .flid3D { }
/* #0. reset*/
*{margin: 0; padding: 0;}
.flid3D{widows: 250px; height: 320px; margin: 50px auto}
#2. 앞면/뒷면 효과 적용 : .flid3D > .front{ }
2.1. 앞면 효과 적용 : .flid3D > .front{ }
2.2. 뒷면 효과 적용 : .flid3D > .back{ }
더보기
.flid3D 코드 전체
/* #1. 앞면 */
.flid3D > .front{
position: absolute;
width: 250px;
height: 320px;
padding: 10px;
border-radius: 7px;
background-color: #fc0;
backface-visibility: hidden;/* 요소의 뒤쪽에서 앞면이 보이게 할지를 정하는 속성 */
transform: perspective(600px) rotateY(0deg);
transition: transform 0.5s linear 0s;
}
/* #2. 뒷면 */
.flid3D > .back{
position: absolute;
width: 250px;
height: 320px;
padding: 10px;
border-radius: 7px;
background-color: #f90;
backface-visibility: hidden;
transform: perspective(600px) rotateY(180deg); /*뒤집어야항게 180*/
transition: transform 0.5s linear 0s;
}
#3. hover 효과 적용 : .flid3D > .back{ } , transform: perspective( px) rotateY( deg)
/* #3. hover */
.flid3D:hover > .front{
transform: perspective(600px) rotateY(-180deg) /*반대로 회전해야 되니끼*/
}
.flid3D:hover > .back{
transform: perspective(600px) rotateY(0deg) /*반대로 넣으면 됨 */
}#4. 다듬기 : h3, p
더보기
HTML 코드 전체
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>0305_css3_예제3</title>
<meta name="robots" content="noindex, nofollow" />
<meta name="keywords" content="-" />
<meta name="description" content="-"/>
<meta name="author" content="-"/>
<style>
<style>
/* #0. reset*/
*{margin: 0 auto; padding: 0; }
.flid3D{widows: 250px; height: 320px; margin: 50px auto}
/* #1. 앞면 */
.flid3D > .front{
position: absolute;
width: 250px;
height: 320px;
padding: 10px;
border-radius: 7px;
background-color: #fc0;
backface-visibility: hidden;/* 요소의 뒤쪽에서 앞면이 보이게 할지를 정하는 속성 */
transform: perspective(600px) rotateY(0deg);
transition: transform 0.5s linear 0s;
}
/* #2. 뒷면 */
.flid3D > .back{
position: absolute;
width: 250px;
height: 320px;
padding: 10px;
border-radius: 7px;
background-color: #f90;
backface-visibility: hidden;
transform: perspective(600px) rotateY(180deg); /*뒤집어야항게 180*/
transition: transform 0.5s linear 0s;
}
/* #3. hover */
.flid3D:hover > .front{
transform: perspective(600px) rotateY(-180deg) /*반대로 회전해야 되니끼*/
}
.flid3D:hover > .back{
transform: perspective(600px) rotateY(0deg) /*반대로 넣으면 됨 */
}
/* #4. 다듬기 */
h3{font-size: 16px; margin-bottom: 40px;}
p{font-size: 12px; line-height: 1.5;}
</style>
</head>
<body>
<div class="flid3D">
<div class="back">
<h3>[뒷면]통신3사, 유통·협력사 '코로나19' 극복 3000억대 지원(종합)</h3>
<p>[서울=뉴시스] 오동현 기자 = 통신3사가 '신종 코로나바이러스 감염증(코로나19)' 확산으로 영 업에 어려움을 겪는 전국 유통망과 협력사를 위해 총 3000억 규모의 상생안을 시행한다.
5일 통신3사가 발표한 상생안에 따르면, SK텔레콤과 자회사 SK브로드밴드가 각각 1130억원과 110억원 규모의 지원책을 마련했다. KT는 1040억원, LG유플러스는 850억원 규모를 지원한다.
</p>
</div>
<div class="front">
<h3>[앞면]가상화폐 거래소, 이젠 정부가 관리한다…'특금법' 국회 본회의 통과</h3>
<p>가상화폐(암호화폐) 거래소 등이 지켜야 할 규제를 담은 '특정 금융거래정보의 보고 및 이용 등에 관한 법률(특금법)' 개정안이 5일 국회 본회의를 통과했다.
국내에서 처음 암호화폐 관련 법안이 공식 제정된 의미가 있다. 관련 업계도 특금법 개정안 통과로 암호화폐 산업 제도권 편입의 첫 발걸음을 뗀 것으로 평가했다. 그러나 한편으론 특금법에서 명시한 신고요건을 충족하지 못하는 영세 업체들의 대거 폐업 가능성도 제기된다.
김산하 한경닷컴 기자 sanha@hankyung.com
기사제보 및 보도자료 open@hankyung.com
</p>
</div>
</div>
</body>
</html>