CSS / backface-visibility / 요소의 뒷쪽에서 앞면이 보이게 할지 정하는 속성

backface-visibility

backface-visibility는 요소의 뒷쪽에서 앞면이 보이게 할지 정하는 속성입니다.

  • 기본값 : visible
  • 상속 : No
  • 애니메이션 : No
  • 버전 : CSS Level 3

문법

backface-visibility: visible | hidden | initial | inherit
  • visible : 보이게 합니다. 기본값입니다.
  • hidden : 보이지 않게 합니다.
  • initial : 기본값으로 설정합니다.
  • inherit : 부모 요소의 속성값을 상속받습니다.

예제

  • 체크박스에 체크하면 박스가 180도 회전합니다.
  • 첫 번째 박스는 앞면이 보이고, 두 번째 박스는 보이지 않습니다.
<!doctype html>
<html lang="ko">
	<head>
		<meta charset="utf-8">
		<title>CSS</title>
		<style>
			.jb {
				box-sizing: border-box;
				display: inline-block;
				width: 200px;
				height: 150px;
				margin: 10px;
				background-color: orange;
				transition: 2s;
			}
			.jb1 {
				backface-visibility: visible;
			}
			.jb2 {
				backface-visibility: hidden;
			}
			input:checked ~ .jb {
				transform: rotateY( 180deg )
			}
		</style>
	</head>
	<body>
		<input type="checkbox">
		<div class="jb jb1">backface-visibility: visible;</div>
		<div class="jb jb2">backface-visibility: hidden;</div>
	</body>
</html>

브라우저 지원

  • Chrome : 36.0+
  • Firefox : 16.0+
  • Internet Explorer : 10.0+
  • Opera : 23.0+
  • Safari : 9.0+

Related Posts

CSS / calc() - 속성값을 사칙연산으로 정할 수 있게 하는 함수

CSS / calc() - 속성값을 사칙연산으로 정할 수 있게 하는 함수

개요 calc()는 괄호 안의 식을 계산한 결과를 속성값으로 사용하게 해주는 함수입니다. 예를 들어 font-size: calc( 10px + 10px ); 는 글자 크기를 20px로 만듭니다. 버전 : CSS Level 3 문법 연산자 +는 덧셈, -는 뺄셈, *는 곱셈, /는 나눗셈입니다. 곱셈과 나눗셈의 좌우에는 공백이 없어도 됩니다. 하지만, 덧셈과 뺄셈의 좌우에는 공백이 있어야 합니다. 계산 순서 왼쪽에서 오른쪽으로 계산합니다. 곱셈과 나눗셈을 먼저 하고, 덧셈과 뺄셈은 ...

CSS / border-spacing / 표(table)의 테두리와 셀(td)의 테두리 사이의 간격 정하는 속성

CSS / border-spacing / 표(table)의 테두리와 셀(td)의 테두리 사이의 간격 정하는 속성

개요 border-spacing으로 표(table)의 테두리와 셀(td)의 테두리 사이의 간격을 정합니다. 기본값 : 2px 상속 : Yes 애니메이션 : No 버전 : CSS Level 2 문법 border-spacing: length | initial | inherit length : 길이를 입력합니다. 값이 한개면 모든 간격에 같은 값을 사용하고, 값이 두개면 첫번째 값은 좌우, 두번째 값은 상하의 간격으로 사용합니다. initial : 기본값으로 설정합니다. inherit : 부모 요소의 속성값을 ...

CSS / 이미지 위에 텍스트 정가운데에 넣기

CSS / 이미지 위에 텍스트 정가운데에 넣기

사진을 강조하는 블로그나 사이트의 경우 이미지 위에 텍스트를 놓는 경우가 많습니다. 텍스트가 보이게 놓기도 하고, 마우스를 올리면 보이게 하기도 합니다. 텍스트를 이미지 위에 어떻게 넣는지 알아보겠습니다. 방법 1 다음은 이미지와 텍스트가 있는 간단한 문서입니다. 이미지는 파란색의 사각형이고, 구분하기 쉽도록 텍스트의 배경색은 노란색으로 했습니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS</title> <style> .jb-wrap { width: 40%; margin: 10px auto; border: 1px solid ...

CSS / max-width, height로 반응형 웹디자인을 위한 이미지 스타일링 하기

CSS / max-width, height로 반응형 웹디자인을 위한 이미지 스타일링 하기

반응형 웹디자인은 웹브라우저의 가로폭에 따라 레이아웃이 변하고, 그에 따라 각 요소의 가로폭도 변합니다. 텍스트는 일반적으로 바뀐 폭에 맞추어 줄바꿈이 되지만, 이미지는 줄바꿈이라는 게 없기 때문에 문제가 생깁니다. 어떤 문제가 발생하는지 살펴보고 해결책을 찾아보겠습니다. 이미지 크기를 정하지 않은 경우 이미지의 크기를 정하지 않으면 부모 요소보다 큰 이미지는 부모 요소를 벗어나서 나타납니다. <!doctype html> <html lang="ko"> <head> ...

CSS / Flex / flex-wrap

CSS / Flex / flex-wrap

flex-wrap은 아이템들의 가로 크기 합이 콘테이너의 가로 크기를 넘어갈 때 어떻게 처리할지를 정합니다. 기본값은 nowrap로... <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS</title> <style> * { box-sizing: border-box; ...

CSS / 마우스 오버 효과 / 다른 이미지 보여주기

CSS / 마우스 오버 효과 / 다른 이미지 보여주기

이미지에 마우스를 올렸을 때 다른 이미지가 나타나는 효과를 CSS로 만들어보겠습니다. display 속성 이용하기 다음과 같이 이미지 두 개를 넣고 div로 감쌉니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS</title> <style> body { ...

CSS / background-position / 배경 이미지의 위치를 정하는 속성

CSS / background-position / 배경 이미지의 위치를 정하는 속성

개요 background-position은 배경 이미지의 위치를 정하는 속성입니다. 기본값 : 0% 0% 상속 : No 애니메이션 : Yes 버전 : CSS Level 1 문법 background-position: x-position y-position | initial | inherit x-position y-position : 가로 위치와 세로 위치를 정합니다. initial : 기본값으로 설정합니다. inherit : 부모 요소의 속성값을 상속받습니다. 위치 값으로 사용할 수 있는 것은 다음과 같습니다. 가로 위치 값 : left, center, right, 백분율, 길이 세로 위치 ...

CSS / background-repeat / 배경 이미지 반복 여부 정하는 속성

CSS / background-repeat / 배경 이미지 반복 여부 정하는 속성

개요 background-repeat로 배경 이미지의 반복 여부와 반복 방향을 정합니다. 기본값 : repeat 상속 : No 애니메이션 : No 버전 : CSS Level 1 문법 background-repeat: repeat | repeat-x | repeat-y | no-repeat | inherit repeat : 가로 방향, 세로 방향으로 반복합니다. repeat-x : 가로 방향으로 반복합니다. repeat-y : 세로 방향으로 반복합니다. no-repeat : 반복하지 않습니다. initial : 기본값으로 설정합니다. inherit : 부모 요소의 속성값을 상속받습니다. 예제 <!doctype html> <html lang="ko"> ...

CSS / list-style-image / 목록의 마커로 이미지 사용하기

CSS / list-style-image / 목록의 마커로 이미지 사용하기

개요 list-style-image로 이미지를 ul, ol 등의 목록의 마커(marker)로 사용할 수 있습니다. 기본값 : none 상속 : Yes 애니메이션 : No 버전 : CSS Level 1 문법 list-style-image: none | url | initial | inherit none : 이미지가 없습니다. url : 사용할 이미지의 URL을 입력합니다. initial : 기본값으로 설정합니다. inherit : 부모 요소의 속성값을 상속받습니다. 예제 이미지는 원본 크기 그대로 나옵니다. 따라서 글자 크기에 ...

CSS / background-origin / 배경 이미지를 어느 영역부터 채워나갈지를 정하는 속성

CSS / background-origin / 배경 이미지를 어느 영역부터 채워나갈지를 정하는 속성

개요 HTML 요소는 박스로 이루어져 있고, 바깥 여백 영역(Margin Area), 테두리 영역(Border Area), 안쪽 여백 영역(Padding Area), 내용 영역(Content Area)으로 구분합니다. background-origin으로 배경 이미지를 어느 영역부터 채워나갈지를 정합니다. 기본값 : padding-box 상속 : No 애니메이션 : No 버전 : CSS Level 3 문법 background-origin: border-box | padding-box | content-box | initial | inherit; border-box : 테두리 영역 왼쪽 위부터 채웁니다. padding-box : 안쪽 여백 영역 왼쪽 ...