틀:이미지 변화/styles.css: 두 판 사이의 차이

편집 요약 없음
편집 요약 없음
1번째 줄: 1번째 줄:
.image-change-template-1 {
.image-change .image-change-inner {
width: 100%;
height: 100%;
position: relative;
position: relative;
transform-style: preserve-3d;
}
}
.imgae-change-template-2 img {
.image-change:hover .image-change-inner {
transform: rotateY(180deg);
}
.image-change-front,
.image-change-back {
position: absolute;
position: absolute;
top: 0;
width: 100%;
left: 0;
height: 100%;
display: none;
backface-visibility: hidden;
}
.image-change-front {
transform: rotateY(0deg);
}
}
.imgae-change-template-1:hover .imgae-change-template-2 img {
.image-change-back {
display: inherit;
  transform: rotateY(180deg);
z-index: 3;
}
}

2024년 5월 14일 (화) 01:18 판

.image-change .image-change-inner {
	width: 100%;
	height: 100%;
	position: relative;
	transform-style: preserve-3d;
}
.image-change:hover .image-change-inner {
	transform: rotateY(180deg);
}
.image-change-front,
.image-change-back {
	position: absolute;
	width: 100%;
	height: 100%;
	backface-visibility: hidden;
}
.image-change-front {
	transform: rotateY(0deg);
}
.image-change-back {
  transform: rotateY(180deg);
}