나는 특정 애니메이션을 추가하도록 요청받은 웹 사이트에서 작업하고 있으며 모든 것이 일반 HTML에서 훌륭하게 작동했지만 Wordpress에 업로드했을 때 (그런데 Salient 테마가 설치된) 원하는 이미지 애니메이션이 다른 것과 겹치지 않았습니다. 내 코드는 다음과 같습니다.
.cdcase{
position:relative;
top:0;
left:0;
}
#case{
position: relative;
top: 0;
left: 0;
z-index:1;
}
#rotate {
position: absolute;
top: 30;
left: 30;
width: 400px;
height: 400px;
transition: width 2s, height 2s, transform 2s;
-webkit-transition: width 2s, height 2s, -webkit-transform 2s;
-moz-transition: width 2s, height 2s, -moz-transform 2s;
-o-transition: width 2s, height 2s, -o-transform 2s;
}
#rotate:hover {
width: 450px;
height: 450px;
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-o-transform: rotate(360deg);
z-index: 2;
}<div class="cdcase">
<img id="case" src="http://firmebucuresti.net/site/wp-content/uploads/2015/09/case.png" >
<a href="#"><img id ="rotate" src="http://firmebucuresti.net/site/wp-content/uploads/2015/09/cd.png" alt="cd"></a>
</div>CD는 파란색 "케이스"아래에 있어야하지만 실제로 코드 스 니펫을 통해 애니메이션을 업로드 했으므로 여기에서도 작동하지 않지만 로컬 호스트에서는 작동합니다. 누군가 내가 뭘 잘못하고 있는지 지적 해 주시겠습니까?
당신은 모든 것을 잘했습니다! 하지만 다음 과 같이 Z- 색인을에서 #rotate:hover로 이동해야 #rotate합니다.
.cdcase{
position:relative;
top:0;
left:0;
}
#case{
position: relative;
top: 0;
left: 0;
z-index:1;
}
#rotate {
position: absolute;
top: 30;
left: 30;
width: 400px;
height: 400px;
transition: width 2s, height 2s, transform 2s;
-webkit-transition: width 2s, height 2s, -webkit-transform 2s;
-moz-transition: width 2s, height 2s, -moz-transform 2s;
-o-transition: width 2s, height 2s, -o-transform 2s;
z-index: 2;
left: 220px;
}
#rotate:hover {
width: 450px;
height: 450px;
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-o-transform: rotate(360deg);
}<div class="cdcase">
<img id="case" src="http://firmebucuresti.net/site/wp-content/uploads/2015/09/case.png" >
<a href="#"><img id ="rotate" src="http://firmebucuresti.net/site/wp-content/uploads/2015/09/cd.png" alt="cd"></a>
</div>또한 페이지의 왼쪽 상단 모서리에서 여백을 만들려면 왼쪽 / 오른쪽 / 위쪽 / 아래쪽 값을 설정해야합니다.
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다