我制作了一张动画个人资料图片,当它悬停在它上面翻转并显示背面。它在Firefox和Chrome中完美运行,但在Safari中无法运行。
它确实翻转,但图像变回前面但朝向相反的方向。
这是我在悬停在它上面后1秒看到的内容。 (这是正面,但水平翻转)
链接:http://www.ik-ben-zzp.nl/testsite/index.php
以下是个人资料图片的HTML CSS。
这是什么问题?
由于
int reminderRequestCode = sPrefs.getInt(KeyConstants.PREF_REMINDER_REQUEST_CODE, -1);
PendingIntent pendingIntent = PendingIntent.getBroadcast(getApplicationContext(),
*reminderRequestCode*, myIntent,0);
AlarmManager alarmManager = (AlarmManager)getSystemService(ALARM_SERVICE);
alarmManager.set(AlarmManager.RTC_WAKEUP, calendar.getTimeInMillis(), pendingIntent);
SharedPreferences.Editor editor = sPrefs.edit();
editor.putInt(KeyConstants.PREF_REMINDER_REQUEST_CODE, ++reminderRequestCode);
editor.commit();
.roundedImage {
overflow:hidden;
width: 200px;
height:200px;
margin-left: auto;
margin-right: auto;
-webkit-animation:pop-in 0.8s;
-moz-animation:pop-in 0.8s;
-ms-animation:pop-in 0.8s;
}
.flip-container {
perspective: 1000;
z-index:3;
margin-bottom:200px;
}
.flip-container:hover .flipper, .flip-container.hover .flipper {
transform: rotateY(180deg);
-webkit-transform: rotateY(180deg);
-ms-transform: rotateY(180deg);
}
.flip-container, .front, .back {
width: 200px;
height: 200px;
margin-left:auto;
margin-right:auto;
}
.flipper {
transition: 0.6s;
-webkit-transition: 0.6s;
-ms-transition: 0.6s;
transform-style: preserve-3d;
-webkit-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
}
.front, .back {
backface-visibility: hidden;
position: absolute;
top: 0;
left: 0;
}
.front {
transform: rotateY(0deg);
-webkit-transform: rotateY(0deg);
-ms-transform: rotateY(0deg);
}
.back {
transform: rotateY(180deg);
-webkit-transform: rotateY(180deg);
-ms-transform: rotateY(180deg);
}
.front div, .back div {
-moz-border-radius: 100px;
-webkit-border-radius: 100px;
border-radius: 100px;
-webkit-animation:pop-in 0.8s;
-moz-animation:pop-in 0.8s;
-ms-animation:pop-in 0.8s;
border: 4px solid white;
}