CSS3의 음영과 두꺼운 테두리 효과로 웹 팩 로고 회전 큐브를 구축하는 방법은 무엇입니까?

CSS3을 사용하여 마스킹 및 두꺼운 테두리 효과로 회전하는 웹 팩 로고 큐브 구축

이 기사는 CSS3을 사용하여 마스킹과 두꺼운 테두리 효과가있는 두 개의 레이어를 포함하는 멋진 웹 팩 로고 회전 큐브를 구축하는 방법에 대해 자세히 설명합니다. 예상 결과를보다 효과적으로 달성하기 위해 초기 코드 구조를 개선 할 것입니다.

초기 체계는 ::before ::after 회전 및 마스킹 효과 측면에서 단점이있었습니다. 의사 요소가 3 차원 큐브를 구축하는 데 이상적이지 않기 때문입니다. 더 나은 솔루션은 사용하는 것입니다<div> 요소는 큐브의 6 개의면을 나타내며 CSS3의 <code>transform-style: preserve-3d; rotateX , rotateY , translateZ 와 같은 속성뿐만 아니라 속성은 3 차원 회전 및 위치를 달성합니다. 내부 큐브는 크기와 위치를 조정하여 외부 큐브의 마스킹 효과를 달성합니다. 두꺼운 테두리는 각면의 border-width 속성을 설정하여 달성됩니다.

개선 된 HTML 구조는 다음과 같습니다.

<div class="cube outer">
  <div class="face front"></div>
  <div class="face back"></div>
  <div class="face top"></div>
  <div class="face bottom"></div>
  <div class="face left"></div>
  <div class="face right"></div>
  <div class="cube inner">
    <div class="face front"></div>
    <div class="face back"></div>
    <div class="face top"></div>
    <div class="face bottom"></div>
    <div class="face left"></div>
    <div class="face right"></div>
  </div>
</div>

해당 CSS 스타일 :

 몸 {
  배경 : #2B3A42;
}

: 루트 {
  --심 : 50px;
}

.cube {
  너비 : 100px;
  높이 : 100px;
  위치 : 상대;
  변환 스타일 : Preserve-3D;
  변환 : 번역 (-50%, -50%) ROTATEX (-35DEG) ROTATEY (-135DEG) Translatez (var (-깊은));
  위치 : 절대;
  상단 : 50%;
  왼쪽 : 50%;
}

.얼굴 {
  위치 : 절대;
  너비 : 100px;
  높이 : 100px;
  박스 사이징 : 국경 박스;
  Z- 인덱스 : -1;
}

.앞쪽 {
  변환 : Translatez (var (-깊이));
}

.뒤쪽에 {
  변환 : rotatey (180deg) translatez (var (-깊이));
}

.맨 위 {
  transform : rotatex (90deg) translatez (var (-깊이));
}

.맨 아래 {
  transform : rotatex (-90deg) translatez (var (-깊이));
}

.왼쪽 {
  변환 : rotatey (-90deg) translatez (var (-깊이));
}

.오른쪽 {
  변환 : rotatey (90deg) translatez (var (-깊은));
}

.outer> .face {
  배경 : #75AFCC;
  테두리 : 1px 솔리드 흰색;
}

.outer> .Back, .outer> .Top, .outer> .right {
  배경 : 없음;
  테두리 width : 0.5px;
  국경 오른쪽 폭 : 5px;
  국경 바닥 폭 : 5px;
  왼쪽 넓이 : 5px; /*두꺼운 테두리의 통합 조정*/
  Z- 인덱스 : 100;
}

.inner {
  너비 : 50px;
  높이 : 50px;
  변환 : 번역 (-50%, -50%);
}

.inner> .face {
  -심 : 25px;
  너비 : 50px;
  높이 : 50px;
  배경 : #5299c8;
}

마스크 및 두꺼운 테두리 효과는 외부 큐브의 부분 표면의 배경을 none 으로 설정하고 border-width 속성을 조정하여 쉽게 달성 할 수 있습니다. 내부 큐브의 크기와 위치를 필요에 따라 조정할 수 있습니다. 이 방법은 기대에 부응하는 웹 팩 로고 효과를 효과적으로 구축합니다.

위 내용은 CSS3의 음영과 두꺼운 테두리 효과로 웹 팩 로고 회전 큐브를 구축하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!