틀:연습장/Lena6/styles.css

2024년 5월 5일 (일) 19:18 판 (원본 보기) Lena (토론 | 기여) (새 문서: @media screen and (max-width: 768px) { .main-id-card { width: 344px; height: 216px; margin: .8rem 0; user-select: none; } } @media screen and (min-width: 768px) { .main-id-card { width: 430px; height: 270px; margin: .8rem 0; user-select: none; } } .main-id-card .main-id-card-inner { width: 100%; height: 100%; position: relative; transform-style: preserve-3d; transition: transform .25s; } .main-id-card:hover .main-id-card-inner { transform: rotateY(180de...)		2024년 5월 6일 (월) 18:30 판 (원본 보기) Lena (토론 | 기여) 편집 요약 없음 다음 편집 →
(같은 사용자의 중간 판 7개는 보이지 않습니다)
1번째 줄:		1번째 줄:
	@media screen and (max-width: 768px) {		@media screen and (max-width: 768px) {
	.main-id-card {		.main-id-card {
	width: 344px;		width: 100%;
	height: 216px;		height: 400px;
	margin: .8rem 0;		margin: .8rem 0;
	user-select: none;		user-select: none;
9번째 줄:		9번째 줄:
	@media screen and (min-width: 768px) {		@media screen and (min-width: 768px) {
	.main-id-card {		.main-id-card {
	width: 430px;		width: 100%;
	height: 270px;		height: 400px;
	margin: .8rem 0;		margin: .8rem 0;
	user-select: none;		user-select: none;

---

2024년 5월 6일 (월) 18:30 판

@media screen and (max-width: 768px) {
	.main-id-card {
		width: 100%;
		height: 400px;
		margin: .8rem 0;
		user-select: none;
	}
}
@media screen and (min-width: 768px) {
	.main-id-card {
		width: 100%;
		height: 400px;
		margin: .8rem 0;
		user-select: none;
	}
}
.main-id-card
.main-id-card-inner {
	width: 100%;
	height: 100%;
	position: relative;
	transform-style: preserve-3d;
	transition: transform .25s;
}
.main-id-card:hover .main-id-card-inner {
	transform: rotateY(180deg);
}
.main-id-card-front,
.main-id-card-back {
	position: absolute;
	width: 100%;
	height: 100%;
	backface-visibility: hidden;
}
.main-id-card-front {
	transform: rotateY(0deg);
}
.main-id-card-back {
  transform: rotateY(180deg);
}