CSS3의 3D 변환translate3d(x, y,z) 함수
translate3d(x,y,z)매개변수 해석: 1.x: x축 방향의 위치를 나타낸다.2.y: Y축 방향의 위치를 나타낸다.3.z:z축 방향의 변위를 나타낸다.코드 인스턴스: 1.x축 방향의 변위:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title> </title>
<style>
#box{
position:relative;
height:150px;
width:150px;
margin-left:450px;
margin-top:250px;
padding:10px;
border:1px solid black;
}
#inner{
width:100px;
height:100px;
text-align:center;
line-height:100px;
font-size:12px;
position:absolute;
border:1px solid black;
background-color:yellow;
transform:translate3d(0px,0,0);
-ms-transform:translate3d(0px,0,0);
-webkit-transform:translate3d(0px,0,0);
-o-transform:translate3d(0px,0,0);
-moz-transform:translate3d(0px,0,0);
}
table{
font-size:12px;
width:500px;
margin-left:220px;
text-align:left;
}
.left{
text-align:right;
width:150px;
}
</style>
<script type="text/javascript">
function change(value){
var oinner=document.getElementById('inner');
var oshow=document.getElementById('show');
oinner.style.transform="translate3d("+value+"px,0,0)";
oinner.style.msTransform="translate3d("+value+"px,0,0)";
oinner.style.webkitTransform="translate3d("+value+"px,0,0)";
oinner.style.MozTransform="translate3d("+value+"px,0,0)";
oinner.style.OTransform="translate3d("+value+"px,0,0)";
oshow.innerHTML=value;
}
window.onload=function(){
var range=document.getElementById("range");
range.onmousemove=function(){
change(this.value);
}
}
</script>
</head>
<body>
<div id="box">
<div id="inner"> </div>
</div>
<table>
<tr>
<td class="left">x :</td>
<td><input type="range" min="-200" step="1" max="200" id="range" value="0"/></td>
</tr>
<tr>
<td class="left">x:</td>
<td>(<span id="show">0</span>)</td>
</tr>
</table>
</body>
</html>드래그 단추를 누르면 x축의 방향 이동을 보여 줍니다. 모든 것이 분명합니다.2.y 축 방향의 변위:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title> </title>
<style>
#box{
position:relative;
height:150px;
width:150px;
margin-left:450px;
margin-top:250px;
padding:10px;
border:1px solid black;
}
#inner{
width:100px;
height:100px;
text-align:center;
line-height:100px;
font-size:12px;
position:absolute;
border:1px solid black;
background-color:yellow;
transform:translate3d(0,0px,0);
-ms-transform:translate3d(0,0px,0);
-webkit-transform:translate3d(0,0px,0);
-o-transform:translate3d(0,0px,0);
-moz-transform:translate3d(0,0px,0);
}
table{
font-size:12px;
width:500px;
margin-left:220px;
text-align:left;
}
.left{
text-align:right;
width:150px;
}
</style>
<script type="text/javascript">
function change(value){
var oinner=document.getElementById('inner');
var oshow=document.getElementById('show');
oinner.style.transform="translate3d(0,"+value+"px,0)";
oinner.style.msTransform="translate3d(0,"+value+"px,0)";
oinner.style.webkitTransform="translate3d(0,"+value+"px,0)";
oinner.style.MozTransform="translate3d(0,"+value+"px,0)";
oinner.style.OTransform="translate3d(0,"+value+"px,0)";
oshow.innerHTML=value;
}
window.onload=function(){
var range=document.getElementById("range");
range.onmousemove=function(){
change(this.value);
}
}
</script>
</head>
<body>
<div id="box">
<div id="inner"> </div>
</div>
<table>
<tr>
<td class="left">y :</td>
<td><input type="range" min="-200" step="1" max="200" id="range" value="0"/></td>
</tr>
<tr>
<td class="left">y:</td>
<td>(<span id="show">0</span>)</td>
</tr>
</table>
</body>
</html>버튼을 드래그하면 Y축의 방향 이동을 보여 줍니다. 모든 것이 분명합니다.3.z축 방향 이동:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title> </title>
<style>
#box{
position:relative;
height:150px;
width:150px;
margin-left:450px;
margin-top:250px;
padding:10px;
border:1px solid black;
-webkit-perspective:1200px;
-moz-perspective:1200px;
-ms-perspective:1200px;
-o-perspective:1200px;
perspective:1200px;
}
#inner{
width:100px;
height:100px;
text-align:center;
line-height:100px;
font-size:12px;
position:absolute;
border:1px solid black;
background-color:yellow;
transform:translate3d(0,0,0);
-ms-transform:translate3d(0,0,0);
-webkit-transform:translate3d(0,0,0);
-o-transform:translate3d(0,0,0);
-moz-transform:translate3d(0,0,0);
}
table{
font-size:12px;
width:500px;
margin-left:220px;
text-align:left;
}
.left{
text-align:right;
width:150px;
}
</style>
<script type="text/javascript">
function change(value){
var oinner=document.getElementById('inner');
var oshow=document.getElementById('show');
oinner.style.transform="translate3d(0,0,"+value+"px)";
oinner.style.msTransform="translate3d(0,0,"+value+"px)";
oinner.style.webkitTransform="translate3d(0,0,"+value+"px)";
oinner.style.MozTransform="translate3d(0,0,"+value+"px)";
oinner.style.OTransform="translate3d(0,0,"+value+"px)";
oshow.innerHTML=value;
}
window.onload=function(){
var range=document.getElementById("range");
range.onmousemove=function(){
change(this.value);
}
}
</script>
</head>
<body>
<div id="box">
<div id="inner"> </div>
</div>
<table>
<tr>
<td class="left">z :</td>
<td><input type="range" min="-200" step="1" max="200" id="range" value="0"/></td>
</tr>
<tr>
<td class="left">z:</td>
<td>(<span id="show">0</span>)</td>
</tr>
</table>
</body>
</html>이상의 코드는 값이 클수록 우리의 효과를 보여 준다.시각적 효과가 클수록 값이 시간할수록 시각적 효과가 작다는 것도 잘 이해해야 한다. 가까울수록 자연히 커지고 멀어질수록 자연히 작아 보인다.이 코드와 상기 두 코드의 가장 큰 차이점은perspective 속성을 적용한 것이다. 이 속성을 사용하지 않으면 프레젠테이션 효과를 볼 수 없다. 3D의 장면에 깊은 Z축이 없기 때문이다.perspective 속성에 관해서는 CSS3의perspective 속성에 대해 1장을 참조할 수 있다.translate3d() 함수는 별도의 쓰기로 분할할 수도 있습니다.
transform:translateX(10px);
transform:translateY(20px);
transform:translateZ(30px);여기는 소개가 많지 않아요. 아주 간단해요. 딱 보면 알아요.
원문 주소는: CSS3의 3D 변환translate3d(x, y,z) 함수 1장입니다.
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
다양한 언어의 JSONJSON은 Javascript 표기법을 사용하여 데이터 구조를 레이아웃하는 데이터 형식입니다. 그러나 Javascript가 코드에서 이러한 구조를 나타낼 수 있는 유일한 언어는 아닙니다. 저는 일반적으로 '객체'{}...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
