원근법과 변환의 사용을 향상시킵니다 : Translatez. 기존의 제품 디스플레이는 사용자의 관심을 끌지 못할 수 있지만 적절한 3D 요소가 디스플레이에 추가되면 효과가 좋을 것입니다 ~
효과지도 :
설명 :이 창의성은 내가 생각하는 것이 아닙니다. 다른 사람들을 모방합니다. 창의성은 w3cplus에 있어야합니다. 물론 요점은 모든 사람에게 그것을하는 방법을 가르치는 것입니다.
우선, CSS3를 사용하여 사각형을 만들도록 가르쳐주십시오.
CS가 있기 전에 그러한 큐브는 만들기가 어렵습니다 ~ 글쎄, 나는 그것이 어렵다고 생각합니다 ~
HTML :
<body> <div class = wapper> <div class = cube> <div class = sign from> 1 </div> <div class = size back> 6 </div> <div class = sign right </div </div> <div class = size left> 3 </div> <div class = size top> 5 </div> <div class = 부호 맨 아래> 2 </div> </div> </body>
이 효과의 단계, 즉 관점의 요소가 단계를 공유하면 각 문의 요소가 다릅니다. 큐브는 큐브를 나타내고 6 개의 div는 각면을 나타냅니다.
div#cube 설정 변환 스타일 : preserve-3d, 다음 각 요소를 회전시키고 번역하십시오.
이제 모든 국수가 같은 평면에 겹쳐져 다음을 포기합니다.
글꼴이 앞으로 이동하고 z 축 방향의 반 마진 (50px)의 거리는 50px입니다.
뒤로 먼저 y 축 주위에서 180도 회전하여 글꼴이 외부로 이어지고 현재는 180도 회전되었으므로 Tanslatez가 아래쪽에 있고 아래로 내려지고 있습니다. 아래에.
같은 방식으로 다른 평면은 x 축 또는 Y 축 주위에서 90도 회전 한 다음 번역 (50px)
CSS :
.wapper {Margin: 100px Auto 0; Width: 100px; Height: 100px; -webkit-Perspective: 1200px; FONT-SIZE: 50px; FONT-Weight: Bold; COLOR: #fff;} .Cub. e {positive: related 너비 : 100px; rotatex (-40deg) (32deg); 높이 : 100px; 배경 : RGBA (255, 99, 71, 0.6); ;} .top {-webkit -transform : rotatex (90deg) translatez (50px);}. 90deg) translatez (50px);} .bottom {-webkit-transform : rotatex (-90deg) translatez (50px);} .Back {-webKit-transform : rotatey (-180deg) (50px);}디스플레이 효과의 경우 원근의 거리를 조정할 수 있습니다 ~
글쎄, 큐브는 이해 되므로이 제품 디스플레이는 두 곳을 나타내지 않습니다.
HTML :
<! > <ul id = content> <li> <div class = wrapper> <img src = images/a.png> <span class = information> <strong> 계약 </strong> easiet way a act form a art forms. </span> </div> </li> <li> <div class = wrapper> <img src = images/b.jpeg> <span class = Information> <strong> 계약 양식 </strong> 가장 쉬운 방법 상점에 Contal Form을 추가하십시오. </strong> 상점에 연락 양식을 추가하는 가장 쉬운 방법
CSS :
<스타일 유형 = text/css> body {font-family : tahoma, arial;} #content {margin : 100px auto 0;} #content li, #content .wrapper, #content li img, #contententit li span {width : 310px; 888888;*/} #content .wrapper {posity : -webkit-transform 스타일 : -webkit-transform .6s;} #content l i img {top : 0; : 3px; 상자 -Shadow : 0px 3px 8px RGBA (0, 0, 0, 0.3); : -webkit-gradient (선형, 왼쪽 상단, 왼쪽 하단, 컬러 스톱 (0%, RGBA (236, 241, 244, 1)), 컬러 스톱 (100%, RGBA (190, 202, 217, 1 1 1 , 1 1, 1 1, 1 1, 1 1, 1 1, 1 1, 117, 1 1, 117, 1 1, 1, 117, 1 1, 1 1, 1 1, 117, 1 1, 1 1 1 , 117, 1 1, 1 1, 1 1, 1 1, 1 1, 117, 1 1, 1 1, 1 1, 1 1, 1 1, 1 1, 1 1, 1 1, 1 1, 1 1, 1 1, 117, 1)); 6S; 255, 255, 255, 0.5); 변환 : ROTATEX (95DEG);} #Content Li : 호버 IMG {Box-Shadow : 없음; , 0.3); Border-Radius : 3px;} </style>CSS는 기본적으로 분석되었습니다. 여기서는 전례없는 제품에 대해 불필요한 것으로 보입니다. 모든 제품 공유 단계를 허용하여 변형 시일을 설정하기 위해 Div.wapper를 추가 한 다음 각 Li를 각 Li에 설정 한 다음 스테이지 효과 관점을 설정하십시오. 마지막 플립 효과는 실제로 Div.wapper에 있습니다.
소스 코드 다운로드를 클릭하십시오
위는이 기사의 모든 내용입니다.