Los siguientes efectos se toman en esta figura.
Ratón puede entrar desde cuatro direcciones, y estará en conformidad con la dirección de giro correspondiente del ratón entra, tales como introducir desde arriba, el cubo se gira desde la parte superior hacia abajo, de derecha a izquierda a la derecha en el cubo giratorio
Cómo conseguir:
1, la rotación 3D se utiliza principalmente para CSS3 escritura
2, el diseño general se divide
3, usando una pequeña cantidad JS aplicar el ratón se trasladó fuera del evento
HTML para lograr lo siguiente:
<Div class = "contenedor">
<Ul>
<Li>
<Div class = "caja">
<Div class = "espectáculo">
<Img src = "./ img / 1.png" alt = "">
</ Div>
<Div class = "ocultar"> ocultar </ div>
</ Div>
</ Li>
<Li>
<Div class = "caja">
<Div class = "espectáculo">
<Img src = "./ img / 2.png" alt = "">
</ Div>
<Div class = "ocultar"> ocultar </ div>
</ Div>
</ Li>
<Li>
<Div class = "caja">
<Div class = "espectáculo">
<Img src = "./ img / 3.png" alt = "">
</ Div>
<Div class = "ocultar"> ocultar </ div>
</ Div>
</ Li>
</ Ul>
</ Div>
<Script src = "./ js / jquery-3.3.1.min.js"> </ script>
<Script src = "./ JS / index.js"> </ script>
Ul li utiliza aquí, que añade una pequeña caja, la caja pequeña que tiene dos caras (además de la prueba se deben superficie ocultar), un tiempo necesario para cambiar la posición de rotación del bloque de ocultar
estilos CSS para lograr:
* {
margin: 0;
padding: 0;
list-style: none;
}
.envoltura{
anchura: 800px;
margen: 100px automático;
frontera: 1px solid # 000;
border-radius: 10px;
visualizar: flexión;
justificar contenido: center;
align-artículos: center;
}
.wrapper ul {
anchura: 100%;
/ * Altura: 200px; * /
visualizar: flexión;
justificar contenido: center;
align-artículos: center;
}
.wrapper li ul {
anchura: 200 píxeles;
altura: 200 píxeles;
margen: 20 píxeles;
perspectiva: 1000px;
}
.wrapper ul li {.box
anchura: 200 píxeles;
altura: 200 píxeles;
position: relative;
transformar-style: preservar-3d;
animación: o.3s facilidad de salida hacia delante;
}
.wrapper .box ul li {.show
position: absolute;
anchura: 100%;
altura: 100%;
}
.wrapper .box li ul {img .show
anchura: 100%;
altura: 100%;
}
.wrapper li ul {.box .hide
position: absolute;
anchura: 100%;
altura: 100%;
text-align: center;
font-size: 30px;
Color: #fff;
visualizar: flexión;
justificar contenido: center;
align-artículos: center;
background-color: # 000;
}
.wrapper .box ul li {.show
transformar: translateZ (100px);
}
.wrapper li ul {.box .hide
transformar: translateZ (-100px);
}
.wrapper li ul .box.in-top .hide,
.wrapper li ul .hide superior .box.out-{
transform: ROTATE3D (1,0,0,90deg) translateZ (100px);
}
.wrapper li ul .box.in-inferior .hide,
.wrapper li ul .box.out-inferior .hide {
transform: ROTATE3D (1,0,0, -90deg) translateZ (100px);
}
.wrapper li ul-.box.in dejó .hide,
.wrapper li ul-.box.out dejó .hide {
transform: ROTATE3D (0,1,0, -90deg) translateZ (100px);
}
.wrapper li ul .box.in derecha .hide,
.wrapper li ul .hide .box.out derecha {
transform: ROTATE3D (0,1,0,90deg) translateZ (100px);
}
.wrapper li ul .box.in-top {
animación-name: en la parte superior;
}
.wrapper .box.out-top {
animación-name: fuera de la parte superior;
}
.wrapper li ul .box.in de fondo {
animación-name: en-inferior;
}
.wrapper .box.out de fondo {
animación-name: fuera inferior;
}
.wrapper li ul-.box.in dejó {
animación nombre: en la izquierda;
}
.wrapper .box.out-izquierda {
animación en nombre de: a-izquierda;
}
.wrapper li ul .box.in derecha {
animación nombre: de derecha;
}
.wrapper .box.out derecha {
animación en nombre de: a-derecha;
}
@keyframes en-top {
0% {
transformar: rotate (0deg);
}
100% {
transformar: rotateX (-90deg);
}
}
@keyframes fuera superior {
0% {
transformar: rotateX (-90deg);
}
100% {
transformar: rotateX (0deg);
}
}
@keyframes en-fondo {
0% {
transformar: rotate (0deg);
}
100% {
transformar: rotateX (90deg);
}
}
@keyframes fuera inferior {
0% {
transformar: rotateX (90deg);
}
100% {
transformar: rotateX (0deg);
}
}
@keyframes en-izquierda {
0% {
transformar: rotateY (0deg);
}
100% {
transformar: rotateY (90deg);
}
}
@keyframes fuera a la izquierda {
0% {
transformar: rotateY (90deg);
}
100% {
transformar: rotateY (0deg);
}
}
@keyframes en-derecha {
0% {
transformar: rotateY (0deg);
}
100% {
transformar: rotateY (-90deg);
}
}
@keyframes fuera a la derecha {
0% {
transformar: rotateY (-90deg);
}
100% {
transformar: rotateY (0deg);
}
}
Al dividir la entrada y salida de los dos casos se dividen en dos clases se realizaron, antes de entrar en la necesidad de ocultar la caja antes de moverse a la posición de rotación, y luego girado para lograr añadiendo el nombre de la clase, el nombre del que animan el uso de la caja de control rotación, mientras se controla la adición al nombre de clase de JS
Aquí la rotación rote énfasis en el eje X es un ángulo positivo, hacia el exterior del ángulo de rotación es negativo, mientras que el eje de la Y derecho es un ángulo de rotación positivo, la rotación a la izquierda es un ángulo negativo, en el que la rotación del eje Z también cambiarán, de modo transformar para el proceso de escritura es muy importante.
Lograr que aquí se consigue en la parte superior y fuera superior, inferior empatía. Para lograr la misma izquierda y derecha, etc.
código JS:
El volumen Función de eventos () {
$ ( 'Cuadro '). En (' MouseEnter', function (e) {
addClassTo (esto, e, 'en');
}). En ( 'mouseleave', function (e) {
addClassTo (este, e, 'hacia fuera');
})
}
El volumen de eventos ();
función GetDirect (dom, e) {
var x = e.offsetX - dom.offsetWidth / 2;
donde y = e.offsetY - dom.offsetHeight / 2;
var d = (Math.round (((Math.atan2 (y, x) * (180 / Math.PI)) + 180) / 90) + 3)% 4;
d volver;
}
función addClassTo (dom, e, estado) {
var d = GetDirect (dom, e);
era dirección = '';
interruptor (d) {
caso 0: {
dirección = 'repetición la máquina';
descanso;
}
caso 1:{
dirección = '-justo';
descanso;
}
caso 2: {
dirección = '-fondo';
descanso;
}
caso 3: {
dirección = '-IZQUIERDA';
descanso;
}
por defecto: romper;
}
$ (Dom) .attr ( 'clase', 'caja' + Estado + dirección);
// dirección de retorno;
}
función JS se utiliza para entrar o salir se juzga, y cuando se añade en el nombre de la clase a cabo
var d = (Math.round (((Math.atan2 (y, x) * (180 / Math.PI)) + 180) / 90) + 3)% 4; la dirección en la que se utiliza la frase para determinar que el entrante ( vertical y horizontalmente), el punto central se mueve hacia el centro de la caja pequeña, y su ángulo se calcula teniendo (0-4), donde después de que se calcula en la dirección correcta en el resto de 4 es 0, los aumentos de las agujas del reloj, pero mediante la adición de 3 4 y luego el resto, que es en la más alta 0, aumenta hacia la derecha para los 3 restantes, se determina que la dirección entrante.
Bueno, esta pequeña demostración de esto, por favor entienda bien. Una profunda comprensión de las transformaciones CSS 3D
