backface-visibility「裏面の表示」

要素の裏面の表示／非表示を指定します。

要素を３Ｄで回転した場合、要素の裏面が見える状態の時の表示／非表示や、立方体の内側の表示／非表示を指定する時に使用します。

CSS Ver.	適用要素	継承
3.0	変形可能な要素	しない

backface-visibility の指定方法

構文
backface-visibility : visible \| hidden;
プロパティ/設定値	意味
backface-visibility: visible;	裏面を表示。裏面には表面の鏡像が表示される。
backface-visibility: hidden;	裏面を非表示。
デフォルト：「タグ毎のスタイル初期値」を参照

※　未対応のブラウザの場合、ベンダープレフィックスが必要です。

ページTOP

backface-visibility のサンプル（回転した要素の裏面の表示／非表示）


<style type="text/css">
.common div{
  font-family   : "メイリオ", sans-serif;
}
div.cssTitle {
  width         : 290px;
  margin-top    : 10px;
  background    : #6495ed;
  color         : #fff;
  font-weight   : bold;
  border        : 2px solid #6495ed;
  padding       : 10px;
}
.css-border {
  width         : 290px;
  border        : 2px solid #6495ed;
  background    : #e7e7ff;
  padding       : 10px;
}
.css-hidden{
  backface-visibility : hidden;
}
.css-visible{
  backface-visibility : visible;
}
.css-front,
.css-back{
  position: absolute;
  width: 100px;
  border: 1px solid #999;
  text-align: center;
  padding : 10px;
}
.css-front{
  background: skyblue;
}
.css-back {
  background: silver;
  transform: rotateY(180deg);
}
.css-rotate {
  width: 120px;
  transform-style: preserve-3d;
}
.css-animation {
  animation: rotate 2s linear infinite;
}
@keyframes rotate {
  from { transform: rotateY(0deg); }
  to { transform: rotateY(360deg); }
}
<!-- html -->
<div class="common">
  <div class="cssTitle">backface-visibility : hidden;</div>
  <div class="css-border">
	<div class="css-hidden css-front css-animation">ＦＲＯＮＴ</div><br><br><br>
	<div>裏面が表示されない</div>
  </div>
  <div class="cssTitle">backface-visibility : visible;</div>
  <div class="css-border">
	<div class="css-visible css-front css-animation">ＦＲＯＮＴ</div><br><br><br>
	<div>裏面（文字が裏返し）が表示される</div>
  </div>
  <div class="cssTitle">backface-visibility : hidden;</div>
  <div class="css-border">
	<div class="css-rotate css-animation">
	  <div class="css-hidden css-front">ＦＲＯＮＴ</div>
	  <div class="css-hidden css-back">ＢＡＣＫ</div>
	</div><br><br><br>
	<div>ＦＲＯＮＴとＢＡＣＫを重ねて指定。<br>
	どちらも裏面は表示しない。<br>
	ＢＡＣＫは180度回転させて、ＦＲＯＮＴと背中合わせに指定。</div>
  </div>
</div>

backface-visibility : hidden;

ＦＲＯＮＴ

裏面が表示されない

backface-visibility : visible;

ＦＲＯＮＴ

裏面（文字が裏返し）が表示される

backface-visibility : hidden;

ＦＲＯＮＴ

ＢＡＣＫ

ＦＲＯＮＴとＢＡＣＫを重ねて指定。
どちらも裏面は表示しない。
ＢＡＣＫは180度回転させて指定。（ＦＲＯＮＴと背中合わせになる）

※　animation、transformが未対応のブラウザの場合、正しく表示されません。

ページTOP

backface-visibility のサンプル（立方体の内側の表示／非表示）


<style type="text/css">
.common div{
  font-family   : "メイリオ", sans-serif;
}
div.cssTitle {
  width         : 290px;
  margin-top    : 10px;
  background    : #6495ed;
  color         : #fff;
  font-weight   : bold;
  border        : 2px solid #6495ed;
  padding       : 10px;
}
.css-border {
  width         : 290px;
  border        : 2px solid #6495ed;
  background    : #e7e7ff;
  padding       : 10px;
}
.css-hidden{
  backface-visibility : hidden;
}
.css-visible{
  backface-visibility : visible;
}
.css-cube {
  width: 150px;
  height: 150px;
  margin: 50px 0 0 50px;
  border: none;
  perspective: 300px;
  perspective-origin: 150% 150%;
  transform-style: preserve-3d;
}
.css-face {
  position: absolute;
  width: 100px;
  height: 100px;
  border: none;
  line-height: 100px;
  font-size: 50px;
  color: black;
  text-align: center;
  opacity: 0.5;
}
.css-forward {
  background: silver;
  transform: translateZ(50px);
}
.css-reverse {
  background: lime;
  transform: rotateY(180deg) translateZ(50px);
}
.css-right {
  background: red;
  transform: rotateY(90deg) translateZ(50px);
}
.css-left {
  background: aqua;
  transform: rotateY(-90deg) translateZ(50px);
}
.css-top {
  background: yellow;
  transform: rotateX(90deg) translateZ(50px);
}
.css-bottom {
  background: fuchsia;
  transform: rotateX(-90deg) translateZ(50px);
}
<!-- html -->
<div class="common">
  <div class="cssTitle">backface-visibility : hidden;</div>
  <div class="css-border">
	<div class="css-cube">
	  <div class="css-hidden css-face css-forward">1</div>
	  <div class="css-hidden css-face css-reverse">2</div>
	  <div class="css-hidden css-face css-right">3</div>
	  <div class="css-hidden css-face css-left">4</div>
	  <div class="css-hidden css-face css-top">5</div>
	  <div class="css-hidden css-face css-bottom">6</div>
	</div>
	<div>内側が表示されない</div>
  </div>
  <div class="cssTitle">backface-visibility : visible;</div>
  <div class="css-border">
	<div class="css-cube">
	  <div class="css-visible css-face css-forward">1</div>
	  <div class="css-visible css-face css-reverse">2</div>
	  <div class="css-visible css-face css-right">3</div>
	  <div class="css-visible css-face css-left">4</div>
	  <div class="css-visible css-face css-top">5</div>
	  <div class="css-visible css-face css-bottom">6</div>
	</div>
	<div>内側（裏面）が表示される</div>
  </div>
</div>

backface-visibility : hidden;

内側が表示されない

backface-visibility : visible;

内側（裏面）が表示される

※　transformが未対応のブラウザの場合、正しく表示されません。

ページTOP

関連するCSS(STYLE)
animation	アニメーションの設定
animation-delay	アニメーションのディレイ
animation-direction	アニメーションの方向
animation-duration	アニメーションの再生時間
animation-fill-mode	アニメーションの再生前後のスタイル
animation-iteration-count	アニメーションの繰り返し
animation-name	アニメーションのキーフレーム名
animation-play-state	アニメーションの再生と一時停止
animation-timing-function	アニメーション速度
perspective	子要素の奥行きの指定
perspective-origin	子要素の奥行きのx軸・y軸方向の位置
transition	トランジションの設定
transition-delay	トランジションのディレイ
transition-duration	トランジションの再生時間
transition-property	トランジション対象のCSSプロパティ
transition-timing-function	トランジションの速度
transform	要素の変形
transform-origin	要素変形の起点
transform-style	要素重なり時の３D表示

このページのURL

当サイトについてよくあるご質問

cman.jp サーバ監視【無料】ＱＲコード作成【無料】画像加工【無料】 htaccess作成【無料】 WEB便利ノート【無料】 IT比較実験【無料】アイコン素材【無料】文字/ボタンのイメージ画像作成【無料】ホームページのパーツ作成【無料】

スマートフォン・タブレット

運営 : CMAN 株式会社シーマン