3D回転するページ
code:style.css
body:has(atype="hashTag"href="/villagepump/3D%E5%9B%9E%E8%BB%A2%E3%81%99%E3%82%8B%E3%83%9A%E3%83%BC%E3%82%B8") {
background: #000;
perspective: 1000px;
overflow: hidden;
}
.container:has(atype="hashTag"href="/villagepump/3D%E5%9B%9E%E8%BB%A2%E3%81%99%E3%82%8B%E3%83%9A%E3%83%BC%E3%82%B8") {
position: relative;
transform-style: preserve-3d;
width: 500px;
height: 1000px;
margin: auto;
animation: page-rotate 30s infinite linear;
}
.page-column:has(atype="hashTag"href="/villagepump/3D%E5%9B%9E%E8%BB%A2%E3%81%99%E3%82%8B%E3%83%9A%E3%83%BC%E3%82%B8") {
position: absolute;
width: 100%;
height: 100%;
transform: rotateX(90deg);
}
@keyframes page-rotate {
0% {transform: rotateX(0deg) rotateY(0deg)}
33% {transform: rotateX(-20deg) rotateY(120deg)}
66% {transform: rotateX(20deg) rotateY(240deg)}
100% {transform: rotateX(0deg) rotateY(360deg)}
}
#3D回転するページ