728x90
<head>
<style>
#id_bar{
width: 20px;
height: 150px;
background-color: red;
}
</style>
</head>
<body>
<div id="id_bar"></div>
</body>
가운데로 옮기기
<style>
#id_bar{
position: relative;
left: 150px;
top: 150px;
width: 20px;
height: 150px;
background-color: red;
}
</style>
버튼
<body>
<input type="button" value="눌렁" onclick="f_rot()">
<div id="id_bar"></div>
<script>
function f_rot(){
}
</script>
</body>아이디를 변수로 받기
var v_bar = document.getElementById("id_bar");더보기
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#id_bar{
position: relative;
left: 150px;
top: 150px;
width: 20px;
height: 150px;
background-color: red;
}
</style>
</head>
<body>
<input type="button" value="눌렁" onclick="f_rot()">
<div id="id_bar"></div>
<script>
var v_bar = document.getElementById("id_bar");
function f_rot(){
}
</script>
</body>
</html>막대회전
function f_rot(){
v_bar.style.transform="rotate(45deg)";
}더보기
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#id_bar{
position: relative;
left: 150px;
top: 150px;
width: 20px;
height: 150px;
background-color: red;
}
</style>
</head>
<body>
<input type="button" value="눌렁" onclick="f_rot()">
<div id="id_bar"></div>
<script>
var v_bar = document.getElementById("id_bar");
function f_rot(){
v_bar.style.transform="rotate(45deg)";
}
</script>
</body>
</html>막대 계속 돌리기
<script>
var v_bar = document.getElementById("id_bar");
var v_gak = 0;
function f_rot() {
v_gak = (v_gak + 10) % 360;
v_bar.style.transform = "rotate(" + v_gak + "deg)";
setTimeout(f_rot,100);
}
</script>더보기
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#id_bar {
position: relative;
left: 150px;
top: 150px;
width: 20px;
height: 150px;
background-color: red;
}
</style>
</head>
<body>
<input type="button" value="눌렁" onclick="f_rot()">
<div id="id_bar"></div>
<script>
var v_bar = document.getElementById("id_bar");
var v_gak = 0;
function f_rot() {
v_gak = (v_gak + 10) % 360;
v_bar.style.transform = "rotate(" + v_gak + "deg)";
setTimeout(f_rot,100);
}
</script>
</body>
</html>transform-origin
회전의 중심을 잡아준다
1) 회전의 중심이 가운데
<style>
#id_bar {
position: relative;
left: 150px;
top: 150px;
width: 20px;
height: 150px;
background-color: red;
transform-origin: center center; /* 기본값 center center */
}
</style>2) 회전의 중심이 위
<style>
#id_bar {
position: relative;
left: 150px;
top: 150px;
width: 20px;
height: 150px;
background-color: red;
transform-origin: center top; /* 기본값 center center */
}
</style>40도만 움직이기
<script>
var v_bar = document.getElementById("id_bar");
var v_gak = 0;
var v_mv=3;
function f_rot() {
v_gak = (v_gak + v_mv) % 360;
v_bar.style.transform = "rotate(" + v_gak + "deg)";
if((v_gak>=40)||(v_gak<=-40)){
v_mv=-v_mv;//방향전환
}
setTimeout(f_rot,100);
}
</script>더보기
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#id_bar {
position: relative;
left: 150px;
top: 150px;
width: 20px;
height: 150px;
background-color: red;
transform-origin: center center; /* 기본값 center center */
}
</style>
</head>
<body>
<input type="button" value="눌렁" onclick="f_rot()">
<div id="id_bar"></div>
<script>
var v_bar = document.getElementById("id_bar");
var v_gak = 0;
var v_mv=3;
function f_rot() {
v_gak = (v_gak + v_mv) % 360;
v_bar.style.transform = "rotate(" + v_gak + "deg)";
if((v_gak>=40)||(v_gak<=-40)){
v_mv=-v_mv;//방향전환
}
setTimeout(f_rot,100);
}
</script>
</body>
</html>