벤더(웹 브라우저 브랜드 회사: 크롬, 사파리, 파이어폭스, 오페라, 엣지)
프리픽스(접두사)
※ 웹 표준을 사용한 시기는 2008년인데, 웹 표준이 W3C(www)에서 2014년에 제정되었다. 6년동안 "벤더 프리픽스"를 사용해서 웹 표준(CSS3)을 구현했다.
-webkit- : 크롬, 사파리
-moz- : 파이어 폭스
-o- : 오페라
-ms- : 인터넷 익스플로러
프리픽스(접두사)
※ 웹 표준을 사용한 시기는 2008년인데, 웹 표준이 W3C(www)에서 2014년에 제정되었다. 6년동안 "벤더 프리픽스"를 사용해서 웹 표준(CSS3)을 구현했다.
-webkit- : 크롬, 사파리
-moz- : 파이어 폭스
-o- : 오페라
-ms- : 인터넷 익스플로러
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>벤더 프리픽스</title>
<style>
.box {
width:450px; height:200px;
background:orange;
-webkit-border-radius:5px;
-moz-border-radius:5px;
-o-border-radius:5px;
-ms-border-radius:5px;
transition:all 0.4s ease-in;
-webkit-transition:all 0.4s ease-in;
-moz-transition:all 0.4s ease-in;
-o-transition:all 0.4s ease-in;
-ms-transition:all 0.4s ease-in;
}
.box:hover {
transform:rotate(-45deg);
-webkit-transform:rotate(-45deg);
-moz-transform:rotate(-45deg);
-o-transform:rotate(-45deg);
-ms-transform:rotate(-45deg);
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
결과
