效果实现
<iframe allowfullscreen="true" data-mediaembed="csdn" frameborder="0" id="rDJAKKUf-1731121930786" src="https://live.csdn.net/v/embed/433302"></iframe>转动方块效果
练练手的代码，可能含有可以优化的地方，斟酌自取
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body{
perspective: 1000px;
}
section{
positive: relative;
width: 500px;
height: 500px;
margin:100px auto;
transform-style: preserve-3d;
animation: rotate 6s linear infinite alternate;
}
@keyframes rotate{
0%{
transform: rotateY(0deg) ;
}
20%{
transform:rotateY(90deg) ;
}
40%{
transform:rotateX(90deg) ;
}
60%{
transform:rotateX(90deg) ;
}
80%{
transform:rotateX(90deg) ;
}
100%{
transform:rotateY(90deg) ;
}
}
section div{
width: 300px;
height: 300px;
position:absolute;
top:100px;
left:100px;
background: url(img.jpg) no-repeat;
}
section div:nth-child(1){
transform: translateZ(150px);
}
section div:nth-child(2){
transform: translateZ(-150px) rotateZ(180deg);
}
section div:nth-child(3){
transform: translateX(150px) rotateY(90deg);
}
section div:nth-child(4){
transform: translateX(-150px) rotateY(-90deg);
}
section div:nth-child(5){
transform: translateY(150px) rotateX(-90deg);
}
section div:nth-child(6){
transform: translateY(-150px) rotateX(-90deg);
}
</style>
</head>
<body>
<section>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</section>
</body>
</html>