De hecho, esta es una aplicación simple del atributo de animación de atributo de transformación CSS3. Cree 6 caras (div) en el plano de la página web y deje que estas 6 caras giren a una velocidad constante para crear una sensación 3D. ¿Qué crees que debería hacerse en la página web de Wei? Lo más sencillo es dejarles tener algo en el eje Z. Las siguientes 6 imágenes son imágenes del pequeño casamentero zorro demonio que encontré al azar. El tamaño no es de 200px o 200px. Agregué algo a los atributos de la imagen y el efecto no es malo.
Código:
<!DOCTYPE html>
<html lang="ch">
<head>
<meta charset="UTF-8">
<title>旋转魔方test</title>
<link rel="icon" href="img/qisui.ico">
<style type="text/css">
html {
perspective: 888px; /*设置元素被查看位置的视图： 设置了这个才有后面的3d效果*/
}
.club-wrapper {
width: 200px;
height: 200px;
/*background-color: #f10215;*/
/*开启它的相对定位 让它的子元素参照它 绝对定位*/
position: relative;
margin: 333px auto;
/*设置3d变形效果*/
transform-style: preserve-3d;
animation: run 15s infinite linear;
}
/*设置club-wrapper下的所有的div的样式 给他们宽度和透明效果*/
.club-wrapper > div {
width: 200px;
height: 200px;
opacity: 0.7;
position: absolute;
}
img {
vertical-align: top;
width: 200px;
height: 200px;
background-size: contain;
}
/*创建关键帧 */
@keyframes run {
from {
transform: rotateX(0) rotateZ(0);
}
to {
transform: rotateX(1turn) rotateZ(1turn);
}
}
/*设置6个面的旋转 自己想象一下 空间中有6个面 这六个面最初都是贴在网页平面的 然后经过变幻 到6个位置*/
.box1 {
transform: rotateY(90deg) translateZ(100px);
}
.box2 {
transform: rotateY(-90deg) translateZ(100px);
}
.box3 {
transform: rotateX(90deg) translateZ(100px);
}
.box4 {
transform: rotateX(-90deg) translateZ(100px);
}
.box5 {
transform: rotateY(180deg) translateZ(100px);
}
.box6 {
transform: rotateY(0deg) translateZ(100px);
}
</style>
</head>
<body>
<!--创建一个外层的容器-->
<div class="club-wrapper">
<div class="box1">
<img src="img/111.jpg">
</div>
<div class="box2">
<img src="img/222.jpg">
</div>
<div class="box3">
<img src="img/333.jpg">
</div>
<div class="box4">
<img src="img/444.jpg">
</div>
<div class="box5">
<img src="img/555.jpg">
</div>
<div class="box6">
<img src="img/666.jpg">
</div>
</div>
</body>
</html>
Efecto: haz clic en mí (puedes mirar antes de que caduque el servidor)
Visualización de imagen gif:
