html空间进入动画界面,HTML5 / CSS3 Transform / Animation 示例页面

HTML>

Tommy's 3D page.

html,body{

font-family: Verdana;

}

body{

max-width:320px;

margin:0 auto;

padding: 0;

}

.stage{

background-color: rgba(0,0,0,0.1);

height:80px;

margin:5px;

margin-top: 0;

border-radius: 2px;

position: relative;

/*一、父元素设定3d透视深度*/

-webkit-perspective:600;

-moz-perspective:600;

-ms-perspective:600;

-o-perspective:600;

perspective:600;

}

.stage:after{

content:"按住我查看效果";

font-size: 11px;

color:rgba(0,0,0,0.4);

display: block;

width: 100px;

height:30px;

text-align: center;

line-height: 30px;

overflow: hidden;

position:absolute;

right:0;

top:25px;

text-shadow:1px 1px 1px #FFF;

}

.box{

-webkit-border-radius: 5px;

-moz-border-radius: 5px;

-ms-border-radius: 5px;

-o-border-radius: 5px;

border-radius: 5px;

width:80px;

height:40px;

position: relative;

left:20px;

top:20px;

color:#FFF;

font-size: 12px;

text-align: center;

line-height: 40px;

background-color: rgba(0,0,0,0.5);

/*二、设定子元素的过渡属性(若有关键帧动画则不需要)*/

-webkit-transition:all .5s ease-in-out;

-moz-transition:all .5s ease-in-out;

-ms-transition:all .5s ease-in-out;

-o-transition:all .5s ease-in-out;

transition:all .5s ease-in-out;

/*三、保证子元素的3d效果*/

-webkit-transform-style:preserve-3d;

-moz-transform-style:preserve-3d;

-ms-transform-style:preserve-3d;

-o-transform-style:preserve-3d;

transform-style:preserve-3d;

/*四、设定子元素的变换原点*/

-webkit-transform-origin:center;

-moz-transform-origin:center;

-ms-transform-origin:center;

-o-transform-origin:center;

transform-origin:center;

}

.box.on{

background-color: #F60;

box-shadow: 0 0 5px rgba(255,102,0,0.3);

}

.rotate.on{

/*五、设定子元素的旋转属性*/

-webkit-transform:rotateY(360deg);

-moz-transform:rotateY(360deg);

-ms-transform:rotateY(360deg);

-o-transform:rotateY(360deg);

transform:rotateY(360deg);

}

.translate.on{

/*五、设定子元素的位移属性*/

-webkit-transform:translateX(100px);

-moz-transform:translateX(100px);

-ms-transform:translateX(100px);

-o-transform:translateX(100px);

transform:translateX(100px);

}

.scale.on{

/*五、设定子元素的变换属性*/

-webkit-transform:scale(1.5);

-moz-transform:scale(1.5);

-ms-transform:scale(1.5);

-o-transform:scale(1.5);

transform:scale(1.5);

}

.skew.on{

/*五、设定子元素的变换属性*/

-webkit-transform:skewY(30deg);

-moz-transform:skewY(30deg);

-ms-transform:skewY(30deg);

-o-transform:skewY(30deg);

transform:skewY(30deg);

}

@-webkit-keyframes spin{

0% {

-webkit-transform:rotateY(0deg);

}

100% {

-webkit-transform:rotateY(360deg);

}

}

@-moz-keyframes spin{

0% {

-moz-transform:rotateY(0deg);

}

100% {

-moz-transform:rotateY(360deg);

}

}

@-ms-keyframes spin{

0% {

-ms-transform:rotateY(0deg);

}

100% {

-ms-transform:rotateY(360deg);

}

}

@-o-keyframes spin{

0% {

-o-transform:rotateY(0deg);

}

100% {

-o-transform:rotateY(360deg);

}

}

@keyframes spin{

0% {

transform:rotateY(0deg);

}

100% {

transform:rotateY(360deg);

}

}

.p600{

/*父元素设定3d透视深度*/

-webkit-perspective:600;

-moz-perspective:600;

-ms-perspective:600;

-o-perspective:600;

perspective:600;

}

.spin{

text-align: center;

/*保证子元素的3d效果*/

-webkit-transform-style:preserve-3d;

-moz-transform-style:preserve-3d;

-ms-transform-style:preserve-3d;

-o-transform-style:preserve-3d;

transform-style:preserve-3d;

/*设定动画*/

-webkit-animation:spin 3s infinite linear;

-moz-animation:spin 3s infinite linear;

-ms-animation:spin 3s infinite linear;

-o-animation:spin 3s infinite linear;

animation:spin 3s infinite linear;

}

Tommy's 3D page.

旋转

位移

缩放

扭曲

$(function(){

var isTouch = "ontouchend" in window,

pDown = isTouch ? "touchstart" : "mousedown",

pUp = isTouch ? "touchend" : "mouseup";

$(".stage").on(pDown,function(e){

var e = e || window.event;

e.preventDefault();

$(this).find(".box").addClass("on");

}).on(pUp,function(e){

$(this).find(".box").removeClass("on");

});

});