0

http://www.melonhtml5.com/#gallery.js

我正在尝试为我的项目实现类似的代码。我只使用整个画廊的一个立方体复制了代码并将其放在小提琴中但不工作我包括 css 和 js

http://jsfiddle.net/qDE5P/

<div id="gallery" class="melonhtml5_gallery">
    <div class="size1" data-caption="Fans" data-image="http://www.melonhtml5.com/images/gallery/champ.jpg" style="width: 150px; height: 150px; z-index: 10;">
        <div class="cube" style="-webkit-transform: translateZ(-75px) rotateX(-180deg);">
            <div class="front" style="-webkit-transform: translateZ(75px); z-index: 100;">
                <img src="http://www.melonhtml5.com/images/gallery/champ.jpg" width="406.77966101694915" height="150" style="margin: 0px;">
            </div>
            <div class="back" style="-webkit-transform: rotateX(-180deg) translateZ(75px); z-index: 1000;">
                <img src="http://www.melonhtml5.com/images/gallery/champ.jpg" width="406.77966101694915" height="150" style="margin: 0px 0px 0px -256.77966101694915px;">
            </div>
            <div class="right" style="-webkit-transform: rotateY(90deg) translateZ(75px); z-index: 100;">
                <img src="http://www.melonhtml5.com/images/gallery/champ.jpg" width="406.77966101694915" height="150">
            </div>
            <div class="left" style="-webkit-transform: rotateY(-90deg) translateZ(75px); z-index: 100;">
                <img src="http://www.melonhtml5.com/images/gallery/champ.jpg" width="406.77966101694915" height="150" style="margin: 0px;">
            </div>
            <div class="top" style="-webkit-transform: rotateX(90deg) translateZ(75px); z-index: 100;">
                <img src="http://www.melonhtml5.com/images/gallery/champ.jpg" width="406.77966101694915" height="150" style="margin-left: -256.77966101694915px;">
            </div>
            <div class="bottom" style="-webkit-transform: rotateX(-90deg) translateZ(75px); z-index: 100;">
                <img src="http://www.melonhtml5.com/images/gallery/champ.jpg" width="406.77966101694915" height="150">
            </div>
        </div>
    </div>
4

0 回答 0