다연이네

[days05] CSS 3D 변환 - transform 본문

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>

 

반응형
저작자표시 비영리

'Web > CSS' 카테고리의 다른 글

[days05] CSS 애니메이션  (0) 2020.12.09
[days05] CSS 전환 - transition  (0) 2020.12.09
[days04] 1) @font-face 2) 2D 변환 방법  (0) 2020.12.08
[days04] 텍스트 효과( text-overflow, word-wrap/break)  (0) 2020.12.08
[days04] gradient 효과, 그림자 효과  (0) 2020.12.08
'Web/CSS' Related Articles more
Comments