Web/CSS
[days05] CSS 3D 변환 - transform
다연
2020. 12. 9. 13:34
반응형
2D에는 translate()가 있었고,
3D에는 translateX(), translateY(), translateZ() tranlate3d(x,y,z)
2D에는scaleX(), scaleY(), scale()
3D에는scaleX(), scaleY(), scaleZ(), scale3D(x,y,z)
2D에는 rotate()
3D에는 rotateX(), rotateY(), rotateZ(), rotate3d(x,y,z)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Insert title here</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<style>
div{
width: 300px;
height: 100px;
background: yellow;
border: 1px solid black;
}
div:last-child {
transform: rotateZ(180deg);
}
</style>
</head>
<body>
<div>Lorem ipsum dolor sit amet.</div>
<div>Lorem ipsum dolor sit amet.</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Insert title here</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<style>
#rotate2D,#rotate3D {
width: 80px;
height: 70px;
color: white;
position:relative;
font-weight:bold;
font-size:15px;
padding:10px;
float:left;
margin-right:50px;
border-radius:5px;
border:1px solid #000000;
background:red;
margin:10px;
}
</style>
</head>
<body>
<div style="height:80px;">
<div onmouseover="rotateDIV()" id="rotate2D">2D rotate</div>
<div onmouseover="rotateYDIV()" id="rotate3D">3D rotate</div>
</div>
<script>
<!--
var x,y,n=0,ny=0,rotINT,rotYINT
function rotateDIV()
{
x=document.getElementById("rotate2D")
clearInterval(rotINT)
rotINT=setInterval("startRotate()",10)
}
function rotateYDIV()
{
y=document.getElementById("rotate3D")
clearInterval(rotYINT)
rotYINT=setInterval("startYRotate()",10)
}
function startRotate()
{
n=n+1
x.style.transform="rotate(" + n + "deg)"
x.style.webkitTransform="rotate(" + n + "deg)"
x.style.OTransform="rotate(" + n + "deg)"
x.style.MozTransform="rotate(" + n + "deg)"
if (n==180 || n==360)
{
clearInterval(rotINT)
if (n==360){n=0}
}
}
function startYRotate()
{
ny=ny+1
y.style.transform="rotateY(" + ny + "deg)"
y.style.webkitTransform="rotateY(" + ny + "deg)"
y.style.OTransform="rotateY(" + ny + "deg)"
y.style.MozTransform="rotateY(" + ny + "deg)"
if (ny==180 || ny>=360)
{
clearInterval(rotYINT)
if (ny>=360){ny=0}
}
}
//-->
</script>
</body>
</html>
반응형