그림자가있는 CSS3 3D 상자

Question

알림 시스템을 만들고 있습니다. 이 알림을 iOS의 일부 알림과 같이 화면의 맨 위가 큐브처럼 회전하는 상자 모양으로 표시하려고합니다.

이제 정육면체의 앞면과 뒷면은 투명 함/배경색이 동일해야합니다. 화면이 바뀌면 마치 상자에 빛나는 램프가있는 것처럼 보는 사람 앞면과 평행하지 않은면에 그림자가 떨어집니다. 이 작업을 수행 할 수 있습니까?

더 명확하게하려면, 상자의 전면 & 다시는 배경 색상과 동일하기 때문에 상자를 돌릴 때, 그것은 회전 상자가 아니라으로 회전 종이 조각처럼 보이지 않을 것 장소. 그래서 제가 원했던 것은 큐브의 얼굴이 뷰어가 아닌 자신의 각도에 따라 그림자를 갖게된다는 것입니다.

예를 들어, 앞면 (배경색과 동일한 색상이므로 실제로 볼 수 없음)이 1도 회전하면 조금 더 어둡거나 가벼워집니다. 또 다른 학위, 좀 더. 얼굴의 실제 색상은 사용자와 직접 평행 한 경우에만 표시됩니다. 이것은 종이의 얇은 종이가 아니라 상자가 있다는 착각을 불러 일으킬 것입니다. 내가 큐브에이 튜토리얼 사용하고

: http://jsfiddle.net/BqJMW/3/

또 다른 문제는 현재 텍스트가 당신이 무슨 뜻인지 안다면 조금 뻗어 것이다 : 여기 http://desandro.github.io/3dtransforms/docs/cube.html

는 바이올린입니다. 보통 #cube에있는 transform: translateZ(-25px); (아래 코드 참조)은이 문제를 해결해야하지만 여전히 비례하지는 않습니다.

CSS

body { 
    background: #ebebeb; 
} 
.container { 
    width: 200px; 
    height: 50px; 
    position: relative; 
    -webkit-perspective: 1000px; 
    perspective: 1000px; 
} 
#cube { 
    width: 100%; 
    height: 100%; 
    position: absolute; 
    -webkit-transform-style: preserve-3d; 
    transform-style: preserve-3d; 
    -webkit-transition: -webkit-transform 1s; 
    transition: transform 1s; 
    -webkit-transform: translateZ(-25px); 
    transform: tranlateZ(-25px); 
} 
#cube figure { 
    margin:0; 
    display: block; 
    position: absolute; 
    width: 100%; 
    height: 100%; 
    -webkit-backface-visibility: hidden; 
    backface-visibility: hidden; 
} 
#cube .front { 
    background: transparant; 
    -webkit-transform: translateZ(25px); 
    transform: translateZ(25px); 
} 
#cube .top { 
    background: green; 
    -webkit-transform: rotateX(-90deg) translateZ(25px); 
    transform: rotateX(-90deg); 
} 
#cube .back { 
    background: transparant; 
    -webkit-transform: rotateX(180deg) translateZ(25px); 
    transform: rotate(180deg); 
} 
#cube.show-front { 
    -webkit-transform:translateZ(-25px); 
    tranform: translateZ(-25px); 
} 
#cube.show-top { 
    -webkit-transform: translateZ(-25px); 
    transform: translateZ(-25px); 
    -webkit-transform: rotateX(90deg); 
    transform: rotateX(90deg); 
} 
#cube.show-back { 
    -webkit-transform: translateZ(-25px); 
    transform: translateZ(-25px); 
    -webkit-transform: rotateX(180deg); 
    transform: rotateX(180deg); 
} 

최종 색상의 어두운 버전으로 알림 얼굴의 초기 색상을 설정하여 HTML

<section class="container"> 
    <div id="cube"> 
    <figure class="front">Front</figure> 
    <figure class="top">Your notification</figure> 
    <figure class="back">Back</figure> 
    </div> 
</section> 

Answer 1

, 우리의 color 속성에 CSS3 transition을 사용할 수 있습니다 얼굴이 회전 할 때 얼굴을 밝은 색상으로 애니메이션합니다.

은 내가 알림 얼굴로/제거에 추가됩니다 밝은 "녹색"/로 새로운 클래스를 추가하고 초기 color이 #cube .top에 새로운 전환을 추가 변경했습니다.

나는 또한 CSS 일부 오타 수정 ( tranform → transform, transparant → transparent)와 같은 클래스에서 재정의되는대로 .show-front|top|back 클래스에서 중복 -webkit-transform:translateZ(-25px); 아닌 접두사 버전을 제거했습니다.

마지막으로 알림 얼굴이 (가) 25px에 의해 뷰어를 향해 번역되면 텍스트가 흐리게 보입니다 (Chrome에서). 이것은 나를 위해 -webkit-perspective: 1000px;을 제거함으로써 사라지는 것 같습니다. 나는 그것을 제거하고 싶다면 그것을 당신에게 맡길 것입니다.

CSS

body { 
    background: #ebebeb; 
} 
.container { 
    width: 200px; 
    height: 50px; 
    position: relative; 
    -webkit-perspective: 1000px; 
    perspective: 1000px; 
} 
#cube { 
    width: 100%; 
    height: 100%; 
    position: absolute; 
    -webkit-transform-style: preserve-3d; 
    transform-style: preserve-3d; 
    -webkit-transition: -webkit-transform 1s; 
    transition: transform 1s; 
    -webkit-transform: translateZ(-25px); 
    transform: translateZ(-25px); 
} 
#cube figure { 
    margin:0; 
    display: block; 
    position: absolute; 
    width: 100%; 
    height: 100%; 
    -webkit-backface-visibility: hidden; 
    backface-visibility: hidden; 
} 
#cube .front { 
    background: transparent; 
    -webkit-transform: translateZ(25px); 
    transform: translateZ(25px); 
} 
#cube .top{ 
    background-color:darkgreen; 
    -webkit-transform: rotateX(-90deg) translateZ(25px); 
    transform: rotateX(-90deg); 
    -webkit-transition:background-color .5s; 
} 
#cube .top.show { 
    background-color:green; 
} 
#cube .back { 
    background: transparent; 
    -webkit-transform: rotateX(180deg) translateZ(25px); 
    transform: rotate(180deg); 
} 
#cube.show-front{ 
} 
#cube.show-top { 
    -webkit-transform: rotateX(90deg); 
    transform: rotateX(90deg); 
} 
#cube.show-back { 
    -webkit-transform: rotateX(180deg); 
    transform: rotateX(180deg); 
} 

자바 스크립트

$('.showfront').click(function() { 
    $('.top').removeClass('show'); 
    $('#cube').removeClass().addClass('show-front'); 
}); 
$('.showtop').click(function() { 
    $('.top').addClass('show'); 
    $('#cube').removeClass().addClass('show-top'); 
}); 
$('.showback').click(function(){ 
    $('.top').removeClass('show'); 
    $('#cube').removeClass().addClass('show-back'); 
});