您的位置：首页 > Web前端 > CSS

css3-transform

2014-08-28 20:46 274 查看

transform属性

- rotate :

-webkit-transform : rotateX(x deg) (沿x轴旋转)

   -webkit-transform : rotateX(x deg) (沿y轴旋转)

-webkit-transform : rotateX(x deg) (沿z轴旋转)

- translate :

  -webkit-transform : translateX(x px) (沿x轴移动,正数向左,负数向右)

-webkit-transform : translateY(y px) (沿y轴移动,正数向下,负数向上)

-webkit-transform : translateZ(z px) (沿z轴移动,正数变近,负数变远)



-origin :

-webkit-transform-origin:x,y,z;(调整元素旋转基点位置,默认为中心点)

x轴属性 : left , center , right , %;

y轴属性 : top , center , bottom , %;

z轴属性 : length px;

-rotate：

<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
#experiment{
-webkit-perspective: 800;
-webkit-perspective-origin: 50% 50%;

-webkit-transition: -webkit-transform 1s linear;
-webkit-transform-style:-webkit-preserve-3d;
}
#block{
width:150px;
height:150px;
background-color: #69c;
margin:170px auto;

}
#op{
margin:0 auto;
font-size:16px;
font-weight:bold;
width:800px;
}
#op .range-control{width:721px;}
</style>

<script type="text/javascript">
function rotate(){
var x = document.getElementById("rotatex").value;
var y = document.getElementById("rotatey").value;
var z = document.getElementById("rotatez").value;
document.getElementById('block').style.webkitTransform = "rotateX("+x+"deg) rotateY("+y+"deg) rotateZ("+z+"deg)";

document.getElementById('degx-span').innerText = x;
document.getElementById('degy-span').innerText = y;
document.getElementById('degz-span').innerText = z;
}
</script>
</head>
<body>
<div id="experiment">
<div id="block">
</div>
</div>
<div id="op">
<p>rotate x: <span id="degx-span">0</span> deg</p>
<input type="range" min="-360" max="360" id="rotatex" value="0" class="range-control" onchange="rotate()" /><br/>
<p>rotate y: <span id="degy-span">0</span> deg</p>
<input type="range" min="-360" max="360" id="rotatey" value="0" class="range-control" onchange="rotate()" /><br/>
<p>rotate z: <span id="degz-span">0</span> deg</p>
<input type="range" min="-360" max="360" id="rotatez" value="0" class="range-control" onchange="rotate()" /><br/>
</div>
</body>
</html>

- translate :

<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
#experiment{
-webkit-perspective: 800;
-webkit-perspective-origin: 50% 50%;

-webkit-transition: -webkit-transform 1s linear;
-webkit-transform-style:-webkit-preserve-3d;
}
#block{
width:150px;
height:150px;
background-color: #69c;
margin:170px auto;

}
#op{
margin:0 auto;
font-size:16px;
font-weight:bold;
width:800px;
}
#op .range-control{width:721px;}
</style>

<script type="text/javascript">
function translateall(){
var x = document.getElementById("translatex").value;
var y = document.getElementById("translatey").value;
var z = document.getElementById("translatez").value;

document.getElementById('block').style.webkitTransform = "translateX("+x+"px) translateY("+y+"px) translateZ("+z+"px)";

document.getElementById('translatex-span').innerText = x;
document.getElementById('translatey-span').innerText = y;
document.getElementById('translatez-span').innerText = z;
}
</script>
</head>
<body>
<div id="experiment">
<div id="block">
</div>
</div>
<div id="op">
<p>translate x: <span id="translatex-span">0</span> px</p>
<input type="range" min="-360" max="360" id="translatex" value="0" class="range-control" onchange="translateall()" /><br/>
<p>translate y: <span id="translatey-span">0</span> px</p>
<input type="range" min="-360" max="360" id="translatey" value="0" class="range-control" onchange="translateall()" /><br/>
<p>translate z: <span id="translatez-span">0</span> px</p>
<input type="range" min="-360" max="360" id="translatez" value="0" class="range-control" onchange="translateall()" /><br/>
</div>
</body>
</html>

代码可分别复制粘贴后,用谷歌浏览器打开,加深对这两个属性的理解

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航