Efectos especiales de visualización de imagen de caja plegable 3D
Primero, muestre el efecto final. La parte más difícil de esta demostración es que el mouse ingresa por diferentes lados, y la dirección debe ser juzgada automáticamente. ¡Este problema se resolverá en detalle más adelante!
La principal idea de programación: la separación de estilo y comportamiento.
Paso 1: construye la estructura html
En un contenedor, se generan seis cajas pequeñas. Aquí utilizo el método ul li. En cada li, hay un área de imagen para envolver imágenes y texto. Aquí utilizo el método de diseño de caja flexible para lograr el diseño de demostración, otros métodos están bien, y luego colocando el área de texto y superponiendo el área de la imagen, prepararse para la construcción posterior del cubo.Para ver con claridad, agregué un poco de transparencia, que se eliminará más adelante.
Parte del código html es el siguiente:
<div class="wrapper">
<ul>
<li>
<div class="pic-area">
<img src="./tq.jpg" alt="">
<p>Lorem, ipsum dolor.</p>
</div>
</li>
<!-- 此处是六个li 其他的省略不写了 -->
</ul>
</div>
El siguiente es el código css, solo como referencia:
*{
margin: 0;
padding: 0;
list-style: none;
}
.wrapper{
width: 1000px;
height: 650px;
border: 1px solid #424242;
margin: 20px auto;
}
ul{
width: 100%;
height: 100%;
display: flex;
flex-wrap: wrap;
justify-content: center;
}
ul>li{
width: 300px;
height: 300px;
margin: 10px;
}
.pic-area{
position: relative;
transform-style: preserve-3d;
}
.pic-area img{
opacity: 0.4;
}
.pic-area p{
position: absolute;
top: 0;
left: 0;
width: 300px;
height: 300px;
background-color: #424242;
font-size: 30px;
line-height: 300px;
text-align: center;
transform: translate3d(0 ,0 ,-1px);
}
Paso 2: Cómo implementar el cubo
Lo primero a tener en cuenta: aunque parece un cubo de seis lados, pero solo tenía dos caras, defino el nombre de clase de las cuatro direcciones, muevo el mouse en diferentes direcciones, agregué el nombre de clase correspondiente a
nosotros La parte a ser volteado es la parte del texto detrás de la imagen. Tenga en cuenta que cuando la parte del texto se voltea 90 grados, el centro de su giro está en la posición central, como se muestra en la siguiente figura. Después de voltear, debe subir y desplazarse hacia adentro,
pero utilicé un método simple, primero panoramizar, luego cambiar el punto de fuente de volteo y finalmente voltear el
código css directamente de la siguiente manera:
.in-top .pic-area .hide{
transform-origin: bottom;
transform: translate3d(0,-100%,0) rotate3d(1,0,0,90deg);
}
Vale la pena señalar que no olvide el siguiente código, uno es la propiedad de profundidad de campo, el otro es activar el modo 3D
Debería haber un efecto como este ahora
Lo mismo es cierto: cuatro caras y cuatro nombres de clases.
.in-top .pic-area .hide{
transform-origin: bottom;
transform: translate3d(0,-100%,0) rotate3d(1,0,0,90deg);
}
.in-bottom .pic-area .hide{
transform-origin: top;
transform: translate3d(0,100%,0) rotate3d(-1,0,0,90deg);
}
.in-left .pic-area .hide{
transform-origin: right;
transform: translate3d(-100%,0,0) rotate3d(0,1,0,-90deg);
}
.in-right .pic-area .hide{
transform-origin: left;
transform: translate3d(100%,0,0) rotate3d(0,1,0,90deg);
}
Configúrelo en un li diferente y vea el efecto actual como se muestra en la figura:
A continuación, este es el efecto de rotación. Aquí, el efecto animado de css3 se usa principalmente para lograr el
primer cambio de la fuente de rotación del área de la imagen, de lo contrario habrá un efecto prominente, 150px es la mitad del ancho y alto de la caja, por lo que el eje de rotación de la caja se fija en el centro de la caja
.pic-area{
position: relative;
transform-style: preserve-3d;
transform-origin: 50% 50% -150px;
animation: 0.3s ease-out forwards;
}
A continuación, defina cuatro fotogramas clave y luego agregue animaciones de animación en diferentes direcciones, excepto que el nombre es un atributo público, por lo que se propone configurarlos juntos en el área de imagen, y lo siguiente es configurar el nombre de la animación por separado
.wrapper .in-top .pic-area{
animation-name: in-top;
}
.wrapper .in-bottom .pic-area{
animation-name: in-bottom;
}
.wrapper .in-left .pic-area{
animation-name: in-left;
}
.wrapper .in-right .pic-area{
animation-name: in-right;
}
@keyframes in-top{
0%{
transform: rotate3d(0,0,0,0)}
100%{
transform: rotate3d(-1,0,0,90deg)}
}
@keyframes in-bottom{
0%{
transform: rotate3d(0,0,0,0)}
100%{
transform: rotate3d(1,0,0,90deg)}
}
@keyframes in-left{
0%{
transform: rotate3d(0,0,0,0)}
100%{
transform: rotate3d(0,1,0,90deg)}
}
@keyframes in-right{
0%{
transform: rotate3d(0,0,0,0)}
100%{
transform: rotate3d(0,-1,0,90deg)}
}
Este es el efecto después de la rotación. Aquí también agregué una transparencia al área de texto.
Arriba está la animación que ingresa, y la animación que se escribe a continuación
es realmente muy simple. Simplemente cambie el orden.
@keyframes out-top{
0%{
transform: rotate3d(-1,0,0,90deg)}
100%{
transform: rotate3d(0,0,0,0)}
}
@keyframes out-bottom{
0%{
transform: rotate3d(1,0,0,90deg)}
100%{
transform: rotate3d(0,0,0,0)}
}
@keyframes out-left{
0%{
transform: rotate3d(0,1,0,90deg)}
100%{
transform: rotate3d(0,0,0,0)}
}
@keyframes out-right{
0%{
transform: rotate3d(0,-1,0,90deg)}
100%{
transform: rotate3d(0,0,0,0)}
}
Se agregó el nombre de la animación
.wrapper .out-top .pic-area{
animation-name: out-top;
}
.wrapper .out-bottom .pic-area{
animation-name: out-bottom;
}
.wrapper .out-left .pic-area{
animation-name: out-left;
}
.wrapper .out-right .pic-area{
animation-name: out-right;
}
El efecto de animación agregado, aquí lo escribiré junto con el efecto de animación ingresado, para que se pueda reducir la cantidad de código
.out-top .pic-area .hide,
.in-top .pic-area .hide{
transform-origin: bottom;
transform: translate3d(0,-100%,0) rotate3d(1,0,0,90deg);
}
.out-bottom .pic-area .hide,
.in-bottom .pic-area .hide{
transform-origin: top;
transform: translate3d(0,100%,0) rotate3d(-1,0,0,90deg);
}
.out-left .pic-area .hide,
.in-left .pic-area .hide{
transform-origin: right;
transform: translate3d(-100%,0,0) rotate3d(0,1,0,-90deg);
}
.out-right .pic-area .hide,
.in-right .pic-area .hide{
transform-origin: left;
transform: translate3d(100%,0,0) rotate3d(0,1,0,90deg);
}
Los principios para configurar los estilos en las cuatro direcciones son los mismos, siempre que sepa cómo configurar el estilo en una dirección.
Cada dirección tiene un conjunto de correspondientes animaciones, que son controlados por el nombre de la clase, a saber, in- dirección y OUT- dirección
El tercer paso: y el paso más importante: ¿cómo juzgar desde qué dirección entró?
Primero: obtenga el objeto li y convierta la matriz de clases li en una matriz
var oLi = Array.prototype.slice.call(document.getElementsByTagName('li'));
Vincular eventos a cada li
oLi.forEach(function(ele ,index){
ele.addEventListener('mouseenter',function(e){
addClass(this,e);
})
})
Definir una función para aumentar el nombre de la clase.
function addClass(ele,e) {
// 判断从那个方向进入
// 首先获取鼠标进入的位置
var x = e.offsetX - ele.offsetWidth / 2;
var y = e.offsetY - ele.offsetHeight / 2;
var deg = Math.atan2(y,x) * (180/Math.PI); //角度值与弧度值的转换
}
Aquí es cuando el mouse ingresa a un cuadro, se generará un valor en radianes. Aquí configuro offsetWidth / 2 para mover el centro del círculo de coordenadas al medio, de modo que pueda obtener el ángulo de una semana, y luego use un parámetro matemático fórmula para convertirlo en un ángulo. Esto es El mouse entra en diferentes ángulos,
pero el rango de ángulos de esta manera será caótico, hay positivo y negativo, así que agregué 180 grados a todos los ángulos, por lo que todos los ángulos se vuelven un número positivo, y es de 0 grados a 360 grados,
echemos un vistazo al rango de ángulos en todas las direcciones en este momento
- arriba: 45 ~ 135
- derecha: 135 ~ 225
- abajo: 225 ~ 315
- izquierda: 0 ~ 45 y 315 ~ 360
Pero ahora este número de grados todavía nos parece inconveniente para operar, así que continúe simplificando y dividiendo cada uno por 90 °.
Entonces el rango de ángulo actual es:
- arriba: 0,5 ~ 1,5
- derecha: 1,5 ~ 2,5
- inferior: 2,5 ~ 3,5
- izquierda: 0 ~ 0.5 y 3.5 ~ 4
Continuar simplificando y redondeando
- arriba: 1
- derecha: 2
- abajo: 3
- left: 0 & 4
Pero ahora hay dos números a la izquierda que representan una dirección, por lo que debemos continuar procesando, cada uno de los cuales es +3, y luego se convierte en 4, 5, 6, 3 y 7, y luego% 4 toma el resto de 4. - arriba: 0
- derecha: 1
- abajo: 2
- left: 3
ahora se convierte en código:
var deg = (Math.round((Math.atan2(y,x) * (180/Math.PI)+180) / 90)+3) % 4;
Ahora las cuatro direcciones se pueden representar mediante un número. El
código js completo es el siguiente:
var oLi = Array.prototype.slice.call(document.getElementsByTagName('li'));
//获取li对象，并把获取到li类数组转换为数组
oLi.forEach(function(ele ,index){
ele.addEventListener('mouseenter',function(e){
addClass(this,e,'in');
})
ele.addEventListener('mouseleave',function(e){
addClass(this,e,'out');
})
})
function addClass(ele,e,state) {
// 判断从那个方向进入
// 首先获取鼠标进入的位置
var x = e.offsetX - ele.offsetWidth / 2;
var y = e.offsetY - ele.offsetHeight / 2;
var deg = (Math.round((Math.atan2(y,x) * (180/Math.PI)+180) / 90)+3) % 4;
var direction;
switch(deg){
case 0 :
direction = 'top';
break;
case 1 :
direction = 'right';
break;
case 2 :
direction = 'bottom';
break;
case 3 :
direction = 'left';
break;
}
ele.className = state + '-' + direction; // 这里采用了类名拼接的方式
}
Finalmente se completa este proyecto.