좀 슬라이드를 보았다는 왼쪽 또는 오른쪽 키를 눌러 http://www.htmlfivewow.comHTML5 슬라이드 쇼 효과
http://slides.html5rocks.com 추천하고 , 슬라이드 큐브 효과를 볼 수 있습니다 보여줍니다. 나는이 효과들과 함께 간단한 웹 페이지를 만들고 싶다. 소스 코드에서 CSS와 자바 스크립트를 가져 오려고했지만 슬라이드가 동일하게 작동하지 않습니다.
- 애니메이션을 적용 할 때 div에는 3D 스타일이 없으며 그냥 움직이고 회전합니다. 사실 http://slides.html5rocks.com은 크롬에있는 동안 내 파이어 폭스에는 3D 효과가 없습니다.
- 자습서가 있습니까?
- IE 10에서 어떻게 작동합니까? 여기
내 코드의 일부입니다 : HTML :
<div class="container">
<div id="div1" class="main slide current"> ... </div>
<div id="div2" class="main slide future"> ... </div>
<div id="div3" class="main slide future"> ... </div>
</div>
CSS :
.container {
height: 100%;
margin-left:auto;
margin-right:auto;
width:800px;
overflow: visible;
visibility: visible;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.main{
border: 1px solid;
border-color: white;
border-radius: 15px 15px 0 0 ;
width: 100%;
min-height: 450px;
text-align: center;
padding: 5px;
}
.slide {
width: 800px;
height: 450px;
-webkit-transition: -webkit-transform 0.8s ease-in-out, opacity 1.2s ease-in-out;
-moz-transition: -moz-transform 0.8s ease-in-out, opacity 1.2s ease-in-out;
-webkit-box-orient: vertical;
-moz-box-orient: vertical;
box-orient: vertical;
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
overflow: hidden;
display: none;
position: absolute;
}
.slide.past {
z-index: 8;
visibility: visible;
display: block;
opacity: 0;
-webkit-transform: translateZ(-400px) rotateY(-90deg) translateZ(400px);
-moz-transform: translateZ(-400px) rotateY(-90deg) translateZ(400px);
-o-transform: translateZ(-400px) rotateY(-90deg) translateZ(6400px);
transform: translateZ(-400px) rotateY(-90deg) translateZ(400px);
}
.slide.current {
z-index: 9;
visibility: visible;
display: block;
opacity: 1;
-webkit-transform: translateZ(-400px) rotateY(0deg) translateZ(400px);
-moz-transform: translateZ(-400px) rotateY(0deg) translateZ(400px);
-o-transform: translateZ(-400px) rotateY(0deg) translateZ(400px);
transform: translateZ(-400px) rotateY(0deg) translateZ(400px);
}
.slide.future {
z-index: 8;
visibility: visible;
display: block;
opacity: 0;
-webkit-transform: translateZ(-400px) rotateY(90deg) translateZ(400px);
-moz-transform: translateZ(-400px) rotateY(90deg) translateZ(400px);
-o-transform: translateZ(-400px) rotateY(90deg) translateZ(400px);
transform: translateZ(-400px) rotateY(90deg) translateZ(400px);
}
스크립트
$("#div1").attr("class", "main slide future");
$("#div2").attr("class", "main slide current");
사람이 알아? – alzhao