CSS
3D 변환

비고

3D 큐브

3D 변형은 많은 3D 모양을 만드는 데 유용합니다. 다음은 간단한 3D CSS 큐브 예제입니다.

HTML :

<div class="cube">
  <div class="cubeFace"></div>
  <div class="cubeFace face2"></div>
</div>

CSS :

body {
  perspective-origin: 50% 100%;
  perspective: 1500px;
  overflow: hidden;
}
.cube {
  position: relative;
  padding-bottom: 20%;
  transform-style: preserve-3d;
  transform-origin: 50% 100%;
  transform: rotateY(45deg) rotateX(0);
}
.cubeFace {
  position: absolute;
  top: 0;
  left: 40%;
  width: 20%;
  height: 100%;
  margin: 0 auto;
  transform-style: inherit;
  background: #C52329;
  box-shadow: inset 0 0 0 5px #333;
  transform-origin: 50% 50%;
  transform: rotateX(90deg);
  backface-visibility: hidden;
}
.face2 {
  transform-origin: 50% 50%;
  transform: rotatez(90deg) translateX(100%) rotateY(90deg);
}
.cubeFace:before, .cubeFace:after {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  transform-origin: 0 0;
  background: inherit;
  box-shadow: inherit;
  backface-visibility: inherit;
}
.cubeFace:before {
  top: 100%;
  left: 0;
  transform: rotateX(-90deg);
}
.cubeFace:after {
  top: 0;
  left: 100%;
  transform: rotateY(90deg);
}

이 예제를 보자.
추가 스타일이 데모에 추가되고 변환이 호버에 적용되어 큐브의 6면을 표시합니다.

주목해야 할 점은 :

• 4 개의 얼굴은 의사 요소로 만들어집니다.
• 연결 변환 이 적용됩니다.

뒷면의 가시성

backface-visibility 속성은 3D 변형과 관련이 있습니다.

3D 변형과 backface-visibility 속성을 사용하면 요소의 원래 정면이 더 이상 화면을 마주 보지 않도록 요소를 회전 할 수 있습니다.

예를 들어, 다음과 같이하면 요소가 화면에서 벗어납니다.

JSFIDDLE

<div class="flip">Loren ipsum</div>
<div class="flip back">Lorem ipsum</div>

.flip {
  -webkit-transform: rotateY(180deg);
  -moz-transform: rotateY(180deg);
  -ms-transform: rotateY(180deg);
  -webkit-backface-visibility: visible;
  -moz-backface-visibility:    visible;
  -ms-backface-visibility:     visible;
}

.flip.back {
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility:    hidden;
  -ms-backface-visibility:     hidden;
}

Firefox 10+ 및 IE 10+는 접두사가없는 backface-visibility 을 지원합니다. Opera, Chrome, Safari, iOS 및 Android는 모두 웹킷 -webkit-backface-visibility 필요 -webkit-backface-visibility .

그것은 4 가지 값을 가지고 있습니다 :

1. visible (기본값) - 화면을 마주 보지 않아도 요소가 항상 표시됩니다.
2. hidden - 화면을 마주 보지 않을 때 요소가 보이지 않습니다.
3. inherit - 속성은 부모 요소에서 값을 가져옵니다.
4. initial - 속성을 기본값으로 설정합니다.이 속성은 표시됩니다.

3D 변환을 사용하여 나침반 포인터 또는 바늘 모양

CSS

div.needle {
  margin: 100px;
  height: 150px;
  width: 150px;
  transform: rotateY(85deg) rotateZ(45deg);
  /* presentational */
  background-image: linear-gradient(to top left, #555 0%, #555 40%, #444 50%, #333 97%);
  box-shadow: inset 6px 6px 22px 8px #272727;  
}

HTML

<div class='needle'></div>

위의 예에서 3D 변환을 사용하여 바늘 또는 나침반 포인터 모양이 만들어집니다. 일반적으로 요소에 rotate 변환을 적용하면 rotate 은 Z 축에서만 발생하며 기껏해야 다이아몬드 모양 만 사용하게됩니다. 그러나 rotateY 변형이 그 위에 추가되면 요소는 Y 축에서 압착되어 바늘처럼 보입니다. Y- 축의 회전이 많을수록 요소가 더 많이 압착됩니다.

위의 예제의 출력은 팁 위에 놓여있는 바늘입니다. 베이스에 고정되어있는 바늘을 만들려면 Y 축 대신 X 축을 따라 회전해야합니다. 따라서 transform 속성의 값은 rotateX(85deg) rotateZ(45deg); .

이 펜 은 Safari 로고 나 나침반 다이얼과 유사한 것을 만들기 위해 유사한 접근 방식을 사용합니다.

변형이없는 요소의 스크린 샷 :

2D 변형 만있는 요소의 스크린 샷 :

3D 변형 요소의 스크린 샷 :

그림자가있는 3D 텍스트 효과

HTML :

<div id="title">
  <h1 data-content="HOVER">HOVER</h1>
</div>

CSS :

*{margin:0;padding:0;}
html,body{height:100%;width:100%;overflow:hidden;background:#0099CC;}
#title{
  position:absolute;
  top:50%; left:50%;
  transform:translate(-50%,-50%);
  perspective-origin:50% 50%;
  perspective:300px;
}
h1{
  text-align:center;
  font-size:12vmin;
  font-family: 'Open Sans', sans-serif;
  color:rgba(0,0,0,0.8);
  line-height:1em;
  transform:rotateY(50deg);
  perspective:150px;
  perspective-origin:0% 50%;
}
h1:after{
  content:attr(data-content);
  position:absolute;
  left:0;top:0;
  transform-origin:50% 100%;
  transform:rotateX(-90deg);
  color:#0099CC;
}
#title:before{
  content:'';
  position:absolute;
  top:-150%; left:-25%;
  width:180%; height:328%;
  background:rgba(255,255,255,0.7);  
  transform-origin: 0 100%;
  transform: translatez(-200px) rotate(40deg) skewX(35deg);
  border-radius:0 0 100% 0;
}

추가 마우스 오버 효과가있는 예보기

이 예제에서 텍스트는 사용자가 화면에서 벗어난 것처럼 보이도록 변형됩니다.

그림자는 그에 따라 변형되므로 텍스트를 따라갑니다. 의사 요소와 data 속성으로 만들어 지므로 부모 (H1 태그)의 변형을 상속합니다.

흰색 "빛"은 #title 요소의 의사 요소로 만들어집니다. 비뚤어지고 둥근 모서리에 테두리 반경을 사용합니다.