首页 > 代码库 > css 动画的例子
css 动画的例子
1. [代码]
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>创建3D模型</title>
<style>
*{padding:0;margin:0;}
li{list-style:none;}
body{font-size:12px;background:#fff;font-family:‘Helvetica Neue‘,Arial,sans-serif;
-webkit-text-size-adjust: none;color:#333;}
.box{margin:100px auto;width:500px;height:500px;border:5px solid #ddd;}
#cube{
width:300px;height:300px;margin:100px auto;
-moz-transform-style:preserve-3d;
-webkit-transform-style:preserve-3d;
}
#cube li{
display:block;position:absolute;width:298px;height:298px;font-size:120px;line-height:298px;text-align:center;border:1px solid #333;z-index:10;
backface-visibility:hidden;
-webkit-backface-visibility:hidden;
}
.front{
-webkit-transform:rotateY(0deg) translateZ(150px);
-moz-transform:rotateY(0deg) translateZ(150px);
background:rgba(0,255,0,0.3);
}
.back{
-webkit-transform:rotateY(180deg) translateZ(150px);
-moz-transform:rotateY(180deg) translateZ(150px);
background:rgba(255,0,0,0.3);
}
.right{
-webkit-transform:rotateY(90deg) translateZ(150px);
-moz-transform:rotateY(90deg) translateZ(150px);
background:rgba(255,255,0,0.3);
}
.left{
-webkit-transform:rotateY(-90deg) translateZ(150px);
-moz-transform:rotateY(-90deg) translateZ(150px);
background:rgba(10,10,10,0.3);
}
.top{
-webkit-transform:rotateX(90deg) translateZ(150px);
-moz-transform:rotateX(90deg) translateZ(100px);
background:rgba(100,0,0,0.3);
}
.bottom{
-webkit-transform:rotateX(-90deg) translateZ(150px);
-moz-transform:rotateX(-90deg) translateZ(150px);
background:rgba(0,255,255,0.3);
}
input[type="range"]{width:800px;}
</style>
</head>
<body>
<ul class="item_transform">
<li class="mode_3d">
<label>透 视：</label><input type="range" id="perspective" min="1" max="10000" value="http://www.mamicode.com/800" /> <span>800px</span>
</li>
<li class="mode_3d">
<label>外容器宽：</label><input type="range" id="width" min="100" max="1000" value="http://www.mamicode.com/300" /> <span>300px</span>
</li>
<li class="mode_3d">
<label>外容器高：</label><input type="range" id="height" min="100" max="1000" value="http://www.mamicode.com/300" /> <span>300px</span>
</li>
<li class="mode_3d">
<label>水平视点：</label><input type="range" id="perspective-origin-x" min="1" max="100" value="http://www.mamicode.com/50" /> <span>50%</span>
</li>
<li class="mode_3d">
<label>垂直视点：</label><input type="range" id="perspective-origin-y" min="1" max="100" value="http://www.mamicode.com/50" /> <span>50%</span>
</li>
<li class="mode_3d">
<label>translateZ：</label><input type="range" id="translateZ" min="0" max="1000" value="http://www.mamicode.com/10" /> <span>10px</span>
</li>
<li class="mode_3d"><label>rotateX：</label><input type="range" id="cube_rotateX" min="-360" max="360" value="http://www.mamicode.com/0" /> <span>0deg</span></li>
<li class="mode_3d"><label>rotateY：</label><input type="range" id="cube_rotateY" min="-360" max="360" value="http://www.mamicode.com/0" /> <span>0deg</span></li>
<li class="mode_3d"><label>rotateZ：</label><input type="range" id="cube_rotateZ" min="-360" max="360" value="http://www.mamicode.com/0" /> <span>0deg</span></li>
</ul>
<div class="box" >
<ul id="cube">
<li class="front">1</li>
<li class="back">2</li>
<li class="right">3</li>
<li class="left">4</li>
<li class="top">5</li>
<li class="bottom">6</li>
</ul>
</div>
<script src="http://www.mamicode.com/js_lib/jquery-2.0.3.js"></script>
<script>
$(function(){
var transformArr=[0,0,0]
$("#perspective").on(‘change‘,function(e) {
$("#cube").parent().css({
"-webkit-perspective":$(this).val()+"px"
});
$(this).next("span").text($(this).val()+"px");
});
$("#width").on(‘change‘,function(e) {
// var val=$(this).val();
$("#cube").css({
"border":"1px solid red",
"width":$(this).val()+"px"
});
$(this).next("span").text($(this).val()+"px");
});
$("#height").on(‘change‘,function(e) {
// var val=$(this).val();
$("#cube").css({
"border":"1px solid red",
"height":$(this).val()+"px"
});
$(this).next("span").text($(this).val()+"px");
});
$("#perspective-origin-x").on(‘change‘,function(e) {
// var val=$(this).val();
$("#cube").css({
"-webkit-perspective-origin-x":$(this).val()+"%",
"-moz-perspective-origin-x":$(this).val()+"%"
});flash插件
$(this).next("span").text($(this).val()+"%");
});http://www.huiyi8.com/flashchajian/?
$("#perspective-origin-y").on(‘change‘,function(e) {
// var val=$(this).val();
$("#cube").css({
"-webkit-perspective-origin-y":$(this).val()+"%",
"-moz-perspective-origin-y":$(this).val()+"%"
});
$(this).next("span").text($(this).val()+"%");
});
$("#translateZ").on(‘change‘,function(e) {
// var val=$(this).val();
$("#cube").css({
"-webkit-transform":"translateZ("+$(this).val()+"px)"
});
$(this).next("span").text($(this).val()+"px");
});
$("#cube_rotateX").on(‘change‘,function(){
transformArr[0]=$(this).val();
$("#cube").css({
"-webkit-transform":"rotateX("+transformArr[0]+"deg) "+
"rotateY("+transformArr[1]+"deg) "+
"rotateZ("+transformArr[2]+"deg)"
});
$(this).next("span").text($(this).val()+"deg");
});
$("#cube_rotateY").on(‘change‘,function(){
transformArr[1]=$(this).val();
$("#cube").css({
"-webkit-transform":"rotateX("+transformArr[0]+"deg) "+
"rotateY("+transformArr[1]+"deg) "+
"rotateZ("+transformArr[2]+"deg)"
});
$(this).next("span").text($(this).val()+"deg");
});
$("#cube_rotateZ").on(‘change‘,function(){
transformArr[2]=$(this).val();
$("#cube").css({
"-webkit-transform":"rotateX("+transformArr[0]+"deg) "+
"rotateY("+transformArr[1]+"deg) "+
"rotateZ("+transformArr[2]+"deg)"
});
$(this).next("span").text($(this).val()+"deg");
});
});
</script>
</body>
</html>
css 动画的例子