Question

我不了解html5，我需要在HTML中创建一个效果为http://www.templatemonster.com/flash-templates/32799.html的网站（根本没有闪存）。

任何人都知道是否有可以共享的可用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中运行，应该将vendor prefixes添加到CSS和JavaScript代码中。

html5如何创建像templatemonster的效果？

1 个答案: