当前位置：网站首页>3D rotation album

3D rotation album

2022-06-30 05:15:00 【-iLu】

.box img:nth-child(1){-webkit-transform: rotate(0deg) translateZ(200px);}

.box img:nth-child(2){-webkit-transform: rotateY(90deg) translateZ(200px);}

.box img:nth-child(3){-webkit-transform: rotateY(-90deg) translateZ(200px);}

.box img:nth-child(4){-webkit-transform: rotateY(180deg) translateZ(200px);}

.box img:nth-child(5){-webkit-transform: rotateX(90deg) translateZ(200px);}

.box img:nth-child(6){-webkit-transform: rotateX(-90deg) translateZ(200px);}

/* @keyframes text1{

0%,5%{-webkit-transform: rotateY(90deg);}

20%,25%{-webkit-transform: rotateY(180deg);}

40%,45%{-webkit-transform: rotateY(270deg);}

60%,65%{-webkit-transform: rotateX(-90deg);}

80%,85%{-webkit-transform: rotateX(0deg);}

95%,100%{-webkit-transform: rotateX(90deg);}

} */

@keyframes text1{

0%{-webkit-transform: rotateX(0deg) rotateY(0deg);}

25% {-webkit-transform: rotateX(110deg)rotateY(-30deg);}

50% {-webkit-transform: rotateX(60deg)rotateY(90deg);}

75% {-webkit-transform: rotateX(10deg)rotateY(120deg);}

100% {-webkit-transform:rotateX(-90deg)rotateY(-20deg);}

}

</style>

</head>

<body>

<!--

</div> -->

</div>

版权声明
本文为[-iLu]所创，转载请带上原文链接，感谢
https://yzsam.com/2022/02/202202160615143835.html