<html>
<head>
<title>bilibili</title>
<!--设置翻转动画-->
<style>
iframe {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
animation-name: site-mirror;
animation-duration: 8s;
}
@keyframes site-mirror {
from {transform: none;}
to {transform: perspective(800px) rotateY(180deg);}
}
</style>
</head>
<body>
<iframe id="bilibili" src="https://www.bilibili.com" frameborder="0">
</iframe>
<script>
// document.getElementById("bilibili").style.transform = "perspective(800px) rotateY(180deg)"
</script>
</body>
</html>
[笔记]CSS实现页面翻转功能
最新推荐文章于 2024-07-24 20:42:50 发布