rotateY(360deg)가 적용이 안됩니다!

HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)

가상클래스 before after 가상클래스 활용한 실전 퍼블리싱 03(SNS 아이콘 애니메이션)

작성

/* Google Web Font */
@import url('https://fonts.googleapis.com/css?family=Raleway&display=swap');

/* Fontawesome 4.7 */
@import url('https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css');

@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css");

body {
    border : 1px solid red;
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}
a {
    text-decoration: none;
    color : #222;
}
.sns {
    background-color: #f8f8f8;
    padding : 40px;
    border-radius: 10px;
    box-shadow: 0 0 20px rgba(0,0,0,0.3);
}
.sns a {
    border : 5px solid white;
    display: inline-block;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background-color: #fff;
    text-align: center;
    line-height: 80px;
    font-size: 40px;
    margin: 0 10px;
    position: relative;
    overflow: hidden;
}
.sns a:before {
    content:'';
    position: absolute;
    width: 100%;
    height: 0;
    bottom:0;
    left:0;
    transition: 0.5s;
}
.sns a:hover:before {
    height: 100%;
}
.sns a:nth-child(1):before {
    background-color: #3b5999;
}
.sns a:nth-child(2):before {
    background-color: #55acee;
}
.sns a:nth-child(3):before {
    background-color: #dd4b39;
}
.sns a:nth-child(4):before {
    background-color: #0077b5;
}
.sns a:nth-child(5):before {
    background-color: #e4405f;
}
.sns a .bi {
    position: relative;
    transition: 0.3s;
}
.sns a:hover .bi {
    transform: rotateY(360deg);
    color: #fff;
}<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title></title>
  <link rel="stylesheet" href="css/style.css">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
</head>

<body>

  <div class="sns">
    <a href="#none"><i class="bi bi-facebook"></i></a>
    <a href="#none"><i class="bi bi-twitter"></i></a>
    <a href="#none"><i class="bi bi-google"></i></a>
    <a href="#none"><i class="bi bi-linkedin"></i></a>
    <a href="#none"><i class="bi bi-instagram"></i></a>
  </div>

  <script src="script\jquery-1.12.4.js"></script>
  <script src="script\custom.js"></script>

</body>
</html><!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title></title>
  <link rel="stylesheet" href="css/style.css">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
</head>

<body>

  <div class="sns">
    <a href="#none"><i class="bi bi-facebook"></i></a>
    <a href="#none"><i class="bi bi-twitter"></i></a>
    <a href="#none"><i class="bi bi-google"></i></a>
    <a href="#none"><i class="bi bi-linkedin"></i></a>
    <a href="#none"><i class="bi bi-instagram"></i></a>
  </div>

  <script src="script\jquery-1.12.4.js"></script>
  <script src="script\custom.js"></script>

</body>
</html>

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title></title>
  <link rel="stylesheet" href="css/style.css">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
</head>

<body>

  <div class="sns">
    <a href="#none"><i class="bi bi-facebook"></i></a>
    <a href="#none"><i class="bi bi-twitter"></i></a>
    <a href="#none"><i class="bi bi-google"></i></a>
    <a href="#none"><i class="bi bi-linkedin"></i></a>
    <a href="#none"><i class="bi bi-instagram"></i></a>
  </div>

  <script src="script\jquery-1.12.4.js"></script>
  <script src="script\custom.js"></script>

</body>
</html>

코드 내용은 위와 같습니다..! rotateY(360deg)를 css에 작성해주었는데 실행 결과 이것만 적용되지 않습니다. 어떤 이유 때문일까요..? 강의 자료에 제공된 css를 복사해서 붙여넣어도 적용되지 않습니다

HTML/CSS jquery

답변 2

코딩웍스(Coding Works)

지식공유자

부트스트랩 아이콘은 인라인 요소이므로 인라인블록 또는 블록으로 바꿔주어야 transform 속성이 적용됩니다.

인프런 AI 인턴

안녕하세요, 인프런 AI 인턴입니다. 황서영님

CSS에서 rotateY(360deg)이 작동하지 않는 문제는 몇 가지 가능성 있는 원인 때문일 수 있습니다. 아래 몇 가지 점검 사항을 확인해 보시기 바랍니다.

Perspective 부족: rotateY를 사용할 때, 3D 전환을 위한 perspective 속성이 설정되지 않았다면 전환이 눈에 띄지 않을 수 있습니다. perspective를 부모 요소에 추가해 보세요.
```
.sns {
   background-color: #f8f8f8;
   padding: 40px;
   border-radius: 10px;
   box-shadow: 0 0 20px rgba(0,0,0,0.3);
   perspective: 1000px; /* Add this line */
}
```
Transform 속성 지원 문제: 일부 구형 브라우저에서는 CSS3의 transform 속성을 완전히 지원하지 않을 수 있습니다. 가능한 브라우저 호환성 문제를 확인하고, 최신 브라우저로 테스트해 보세요.
HTML/CSS 구조 확인: 코드 중복이나 다른 스크립트가 문제를 발생시킬 수 있습니다. HTML 구조를 정리하고 필요하지 않은 부분을 제거하여 문제를 최소화하세요. 위의 HTML에서 <!DOCTYPE html>과 <html> 태그는 한 번만 사용해주세요.

위의 제안된 해결 방안으로도 문제가 해결되지 않는다면, Console 창에서 에러 메시지를 확인하거나 다른 CSS 스타일이 충돌하여 문제를 일으키고 있는지 확인해 보세요.

다음과 같은 유사한 질문이 도움이 될 수 있습니다:
- 폰트어썸과 로테이트가 작동을 안해요

저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다. 현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏 추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.

인프런 커뮤니티 질문&답변

rotateY(360deg)가 적용이 안됩니다!