html - html5如何创建类似templatemonster的效果？

Question

我对html5一无所知，我需要在HTML中制作一个具有http://www.templatemonster.com/flash-templates/32799.html效果的网站（根本没有flash）。

任何人都知道是否有可以共享的可用 html5 源。

非常感谢。

Answer 1

它可以通过 CSS 3D 转换和 CSS 转换以及一些 JavaScript 来实现。当然，浏览器支持可能会受到限制。

这是一个在 10 分钟内完成的示例（仅限 Webkit！）http://jsfiddle.net/bZdTE/

有趣的是：

变换：透视。

#box {
    // perspective() changes the "depth"; 
    // rotateY() - rotation; 
    // and translateZ() makes the whole area react to mouse pointer; 
    -webkit-transform: perspective( 800px ) rotateY( 45deg ) translateZ(100px);
}

了解更多：http ://desandro.github.io/3dtransforms/docs/perspective.html

过渡使红色方块随动画出现/消失。

.grid .row > div span { 
    position:absolute; 
    bottom:20px; 
    height:0; 
    overflow:hidden; 
    // define which properties should animate (height: and bottom: ) 
    // and how fast the animation should be (200ms);
    -webkit-transition: height 200ms ease-in, bottom 200ms; 
}

.grid .row > div:hover span {
    height:100%;  
    bottom:0;
}

了解更多：https ://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_CSS_transitions

光标向左/向右移动时更改视角的JavaScript

var box = document.getElementById('box');
var move = function(e){
    var s = "perspective( 500px ) rotateY( deg ) translateZ(100px)";
     // this calculation is a random guess, just to make it work. should be something more carefully crafted;
    s = s.replace( 'deg', ((e.clientX-200) / 400) * 45 + 'deg' );
    box.style.webkitTransform = s;
}

document.body.addEventListener( 'mousemove', move, true );

为了让它在 Firefox 和现代 IE 中工作，应该在 CSS 和 JavaScript 代码中添加供应商前缀。