css3.0 transform 3D特效演示

最新推荐文章于 2023-01-02 21:27:42 发布
原创最新推荐文章于 2023-01-02 21:27:42 发布 · 1k 阅读
0 ·
CC 4.0 BY-SA版权
文章标签：
#css3.0 #transform
html5+css3.0 专栏收录该内容
8 篇文章
订阅专栏
本文提供了一个使用CSS3.0实现的3D变换交互式演示demo，通过滑块调整元素在三维空间中的旋转、移动和缩放，直观展示3D变换效果。
这两天在学习css3.0里面的transform，为了便于理解写了一个demo，希望能更好的理解和学习这一酷炫的属性。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>css3.0 3D变换demo</title>
<style type="text/css">
body, p, div, input, span, button {
	margin: 0;
	padding: 0;
	font-family:"微软雅黑";
}
h2 { text-align: center; }
.btn_reset {
	width: 80px;
	height: 30px;
	line-height: 30px;
	font-size: 14px;
	border: 1px solid #D13C3A;
	border-radius: 2px;
	background: #EF3A38;
	color: #FFF;
	box-shadow: 0 1px 0 #FF6F6F inset;
}
.btn_resetAll{ width:120px; }
.flat1:hover {
	background: #FB5756;
	cursor: pointer;
}
.lbox {
	width: 1000px;
	margin: 10px auto;
}
legend {  }
.box {
	width: 1000px;
	height: 20px;
	line-height: 20px;
	margin: 10px auto;
}
/* stage */
.stage {
	width: 800px;
	height: 300px;
	margin: 20px auto;
	border: 2px solid #B6B6B6;
	position: relative;
	background: url(bg.png) no-repeat center bottom;
	
	-webkit-perspective: 600px; /* 透视深度 */
	-webkit-perspective-origin: 50% 50%; /* 观测点，透视点 */
	transform-style: -webkit-preserve-3d; /* 变换类型 flat|preserve-3d */
	
	perspective: 600px; /* 透视深度 */
	perspective-origin: 50% 50%; /* 观测点，透视点 */
	transform-style: preserve-3d; /* 变换类型 flat|preserve-3d */	
}
.lineX {
	width: 100%;
	height: 0px;
	border-top: 1px dashed #D6D6D6;
	position: absolute;
	top: 50%;
	z-index: -1;
}
.lineY {
	width: 0px;
	height: 100%;
	border-left: 1px dashed #D6D6D6;
	position: absolute;
	left: 50%;      
	z-index: -1;
}
/* operated element */
#block {
	width: 200px;
	height: 200px;
	margin-left: -100px;
	margin-top: -100px;
	position: absolute;
	top: 50%;
	left: 50%;
	border: 1px solid #900;
	background: rgba(255,255,255,0.6);
	font: bold 160px/200px "楷体";
	text-align: center;
	color: #FFF;
	text-shadow: 0 0 5px #F00;
	box-shadow: 0 0 20px #f00 inset, 0 0 20px #FFA5A5;
	overflow: hidden;
	
	transition: -webkit-transform 1s;
	transition: -moz-transform 1s;
	transition: transform 1s;
}
/* showInfo */
.p_val {
	width: 1000px;
	height: 30px;
	line-height: 30px;
	margin: 0 auto;
}
/* silder */
input[type='range'] {
	height: 20px;
	width: 800px;
	cursor: pointer;
	vertical-align: middle;
}
</style>
</head>

<body>
<div class="box">
  <h2>css3.0 3D变换demo</h2>
</div>
<div class="stage">        <p id="block">福</p>
  <div class="lineX"></div>
  <div class="lineY"></div>
</div>

<!-- 3D旋转 -->
<fieldset class="lbox">
  <legend>3D旋转<span class="p_val" id="p_val_rotate">[ rotateX(0deg) rotateY(0deg) rotateZ(0deg) ]</span></legend>
  <div class="box">X轴 -360deg
    <input id="sideValX" type="range" min="-360" max="360" value="0" step="1" />
    360deg</div>
  <div class="box">Y轴 -360deg
    <input id="sideValY" type="range" min="-360" max="360" value="0" step="1" />
    360deg</div>
  <div class="box">Z轴 -360deg
    <input id="sideValZ" type="range" min="-360" max="360" value="0" step="1" />
    360deg</div>
  <div class="box">
    <button class="btn_reset" id="btn_resetRotate">重 置</button>
  </div>
</fieldset>
<!--End 3D旋转-->

<!-- 3D移动 -->
<fieldset class="lbox">
  <legend>3D移动<span class="p_val" id="p_val_translate">[ translateX(0px) translateY(0px) translateZ(0px) ]</span></legend>
  <div class="box">X轴　-300px
    <input id="sideValTX" type="range" min="-300" max="300" value="0" step="1" />
    300px</div>
  <div class="box">Y轴　-200px
    <input id="sideValTY" type="range" min="-200" max="200" value="0" step="1" />
    200px</div>
  <div class="box">Z轴　-300px
    <input id="sideValTZ" type="range" min="-300" max="300" value="0" step="1" />
    300px</div>
  <div class="box">
    <button class="btn_reset" id="btn_resetTranslate">重 置</button>
  </div>
</fieldset>
<!--End 3D移动-->

<!-- 3D缩放 -->
<fieldset class="lbox">
  <legend>3D缩放<span class="p_val" id="p_val_scale">[ scaleX(1) scaleY(1) scaleZ(1) ]</span></legend>
  <div class="box">X轴　　　   0
    <input id="sideValSX" type="range" min="0" max="4" value="1" step="0.01" />
    4倍</div>
  <div class="box">Y轴　　　   0
    <input id="sideValSY" type="range" min="0" max="4" value="1" step="0.01" />
    4倍</div>
  <div class="box">Z轴　　　   0
    <input id="sideValSZ" type="range" min="0" max="4" value="1" step="0.01" />
    4倍</div>
    <div class="box">
    <button class="btn_reset" id="btn_resetScale">重 置</button>
  </div>
</fieldset>
<!--End 3D缩放-->

<div class="box">
  <button class="btn_reset btn_resetAll" id="btn_setAll">重置所有</button>
</div>
</body>
</html>
<script type="text/javascript">
function $$(id){
	if(document.getElementById(id))
		return document.getElementById(id);	
	else
		return false;
}
function getVal(){
	var val_rotate,val_translate, val_scale;
	val_rotate = " rotateX(" + $$('sideValX').value + "deg) ";
	val_rotate += "rotateY(" + $$('sideValY').value + "deg) ";
	val_rotate += "rotateZ(" + $$('sideValZ').value + "deg) ";
	
	val_translate = "translateX(" + $$('sideValTX').value + "px) ";
	val_translate += "translateY(" + $$('sideValTY').value + "px) ";
	val_translate += "translateZ(" + $$('sideValTZ').value + "px) ";
	
	val_scale = "scaleX(" + $$('sideValSX').value + ") ";
	val_scale += "scaleY(" + $$('sideValSY').value + ") ";
	val_scale += "scaleZ(" + $$('sideValSZ').value + ") ";
	
	$$("p_val_rotate").innerHTML = "[ " + val_rotate + " ]";
	$$("p_val_translate").innerHTML = "[ " + val_translate + " ]";
	$$("p_val_scale").innerHTML = "[ " + val_scale + " ]";
	return val_scale + val_rotate + val_translate ;	
}
function setRangeVal(id, val){
	$$(id + 'X').value = val;
	$$(id + 'Y').value = val;
	$$(id + 'Z').value = val;
}

function changeVal(){
	$$("block").style.transform = getVal();
	$$("block").style.webkitTransform = getVal();
}

$$("sideValX").onchange = function(){ changeVal();}
$$("sideValY").onchange = function(){ changeVal();}
$$("sideValZ").onchange = function(){ changeVal();}

$$("sideValTX").onchange = function(){ changeVal();}
$$("sideValTY").onchange = function(){ changeVal();}
$$("sideValTZ").onchange = function(){ changeVal();}

$$("sideValSX").onchange = function(){ changeVal();}
$$("sideValSY").onchange = function(){ changeVal();}
$$("sideValSZ").onchange = function(){ changeVal();}

$$("btn_resetRotate").onclick = function(){ 
	setRangeVal("sideVal", 0); 
	changeVal(); 
}
$$("btn_resetTranslate").onclick = function(){
	setRangeVal("sideValT", 0); 
	changeVal(); 
}
$$("btn_resetScale").onclick = function(){
	setRangeVal("sideValS", 1); 
	changeVal(); 
}

$$("btn_setAll").onclick = function(){
	setRangeVal("sideVal", 0);
	setRangeVal("sideValT", 0); 
	setRangeVal("sideValS", 1);  
	changeVal(); 
}

</script>