Folgende Effekte sind in dieser Fig.
Maus kann aus vier Richtungen eintreten, und in Übereinstimmung mit entsprechender Drehrichtung wird von der Maus eingibt, wie beispielsweise von oben her eintritt, der Kubus von oben nach unten gedreht wird, von rechts nach links nach rechts in den rotierenden Würfel
Wie zu erreichen:
1 wird die 3D-Rotation vor allem auf Schreib CSS3 verwendet
2 ist die Gesamtanordnung ist aufgeteilt
3, eine kleine Menge JS implementieren mit der Maus bewegt der Veranstaltung aus
HTML folgendes zu erreichen:
<Div class = "Wrapper">
<Ul>
<Li>
<Div class = "Box">
<Div class = "show">
<Img src = "./ img / 1.png" alt = "">
</ Div>
<Div class = "verstecken"> verbergen </ div>
</ Div>
</ Li>
<Li>
<Div class = "Box">
<Div class = "show">
<Img src = "./ img / 2.png" alt = "">
</ Div>
<Div class = "verstecken"> verbergen </ div>
</ Div>
</ Li>
<Li>
<Div class = "Box">
<Div class = "show">
<Img src = "./ img / 3.png" alt = "">
</ Div>
<Div class = "verstecken"> verbergen </ div>
</ Div>
</ Li>
</ Ul>
</ Div>
<Script src = "./ js / jquery-3.3.1.min.js"> </ script>
<Script src = "./ js / index.js"> </ script>
Ul li hier verwendet, die eine kleine Box, die kleine Box gegeben, das zwei Flächen aufweist (zusätzlich zu den Beweis sind aufgrund Verbergen Oberfläche), eine Zeit erforderlich, die Drehposition des Blocks zu verstecken ändern
CSS-Stil zu erreichen:
* {
margin: 0;
padding: 0;
list-style: none;
}
.Verpackung{
Breite: 800 Pixel;
margin: 100px auto;
border: 1px solid # 000;
Grenzradius: 10px;
Anzeigen: Flex;
rechtfertigen-Inhalt: center;
align-Elemente: center;
}
.wrapper ul {
Breite: 100%;
/ * Höhe: 200 Pixel; * /
Anzeigen: Flex;
rechtfertigen-Inhalt: center;
align-Elemente: center;
}
.wrapper ul li {
Breite: 200 Pixel;
Höhe: 200 Pixel;
margin: 20px;
Perspektive: 1000px;
}
.wrapper ul li {.box
Breite: 200 Pixel;
Höhe: 200 Pixel;
Position: relative;
Transformation-style: preserve-3d;
Animation: o.3s Leichtigkeit-out nach vorn;
}
.wrapper ul li .box .show {
Position: absolute;
Breite: 100%;
Höhe: 100%;
}
.wrapper ul li .box .show img {
Breite: 100%;
Höhe: 100%;
}
.wrapper ul li .box .Hide {
Position: absolute;
Breite: 100%;
Höhe: 100%;
text-align: center;
font-size: 30px;
Farbe: #fff;
Anzeigen: Flex;
rechtfertigen-Inhalt: center;
align-Elemente: center;
background-color: # 000;
}
.wrapper ul li .box .show {
Transformation: translateZ (100 Pixel);
}
.wrapper ul li .box .Hide {
Transformation: translateZ (-100px);
}
.wrapper ul li .box.in-top .Hide,
.wrapper ul li .box.out-top .Hide {
Transformation: rotate3d (1,0,0,90deg) translateZ (100 Pixel);
}
.wrapper ul li .box.in-bottom .Hide,
.wrapper ul li .box.out-bottom .Hide {
Transformation: rotate3d (1,0,0, -90deg) translateZ (100 Pixel);
}
.wrapper ul li .box.in-links .Hide,
.wrapper ul li .box.out-links .Hide {
Transformation: rotate3d (0,1,0, -90deg) translateZ (100 Pixel);
}
.wrapper ul li .box.in rechts .Hide,
.wrapper ul li .box.out rechts .Hide {
Transformation: rotate3d (0,1,0,90deg) translateZ (100 Pixel);
}
.wrapper ul li .box.in-top {
Animation-name: in-top;
}
.wrapper .box.out-top {
Animation-name: out-top;
}
.wrapper ul li .box.in-bottom {
Animation-name: in den Boden;
}
.wrapper .box.out-bottom {
Animation-name: out-Boden;
}
.wrapper ul li .box.in-links {
Animation-name: in-links;
}
.wrapper .box.out links {
Animation-name: out-links;
}
.wrapper ul li .box.in rechts {
Animation-name: in-Recht;
}
.wrapper .box.out rechts {
Animation-name: out-Recht;
}
@keyframes in-top {
0% {
Transformation: Drehen (0 Grad);
}
100%{
Transformation: rotateX (-90deg);
}
}
@keyframes out-top {
0% {
Transformation: rotateX (-90deg);
}
100%{
Transformation: rotateX (0 Grad);
}
}
@keyframes in-bottom {
0% {
Transformation: Drehen (0 Grad);
}
100%{
Transformation: rotateX (90deg);
}
}
@keyframes out-bottom {
0% {
Transformation: rotateX (90deg);
}
100%{
Transformation: rotateX (0 Grad);
}
}
@keyframes in links {
0% {
Transformation: rotateY (0 Grad);
}
100%{
Transformation: rotateY (90deg);
}
}
@keyframes out-links {
0% {
Transformation: rotateY (90deg);
}
100%{
Transformation: rotateY (0 Grad);
}
}
@keyframes in rechten {
0% {
Transformation: rotateY (0 Grad);
}
100%{
Transformation: rotateY (-90deg);
}
}
@keyframes out-Recht {
0% {
Transformation: rotateY (-90deg);
}
100%{
Transformation: rotateY (0 Grad);
}
}
Durch die Unterteilung wird den Eintrags und aus den beiden Fällen in zwei Klassen eingeteilt wurden realisiert, bevor die Notwendigkeit der Eingabe der Box, bevor er auf die Drehposition zu verbergen, und dann gedreht, um durch Addieren des Klassennamen zu erreichen, dessen Name Verwendung belebte an die Steuerbox Drehung, während die Steuerung der Zugabe zu dem Klassennamen von JS
Hier liegt der Schwerpunkt Drehung drehen sich in der X-Achse ein positiver Winkel ist, nach außen Rotationswinkel negativ ist, während die rechte Y-Achse ist eine positive Rotationswinkel, die Drehung auf der linken Seite ist ein negativer Winkel, wobei die Drehung der Z-Achse ändert sich auch, so transformieren der Prozess um des Schreibens ist sehr wichtig.
Erreichen Sie hier wird erreicht, indem in-Top-und Out-Top, Empathie unten. Um das zu erreichen die gleichen links und rechts, usw.
JS-Code:
Funktion Ereignis Volume () {
$ ( 'Kasten). Auf (' MouseEnter-', function (e) {
addClassTo (this, e, 'in');
}). On ( 'mouseleave', function (e) {
addClassTo (this, e, 'out');
})
}
Ereignis-Volume ();
Funktion getDirect (dom, e) {
var x = e.offsetX - dom.offsetWidth / 2;
wobei y = e.offsetY - dom.offsetHeight / 2;
var d = (Math.round (((Math.atan2 (y, x) * (180 / Math.PI)) + 180) / 90) + 3)% 4;
Rück d;
}
Funktion addClassTo (dom, e, state) {
var d = getdirect (dom, e);
war direction = '';
Schalter (d) {
Fall 0: {
direction = '-top';
brechen;
}
Fall 1:{
direction = '-right';
brechen;
}
Fall 2: {
direction = '-bottom';
brechen;
}
Fall 3: {
direction = '-left';
brechen;
}
Standard: break;
}
$ (Dom) .attr ( 'Klasse', 'Box' + Zustand + Richtung);
// Rückrichtung;
}
JS-Funktion wird verwendet, wird beurteilt, einzugeben oder zu gehen, und wenn sie in den Namen der Klasse aus hinzugefügt
var d = (Math.round (((Math.atan2 (y, x) * (180 / Math.PI)) + 180) / 90) + 3)% 4; die Richtung, in der der Ausdruck, dass die eingehenden, um zu bestimmen verwendet wird ( vertikal und horizontal), wird der Mittelpunkt auf der Mitte der kleinen Box bewegt und dessen Winkel nimmt berechnet (0-4), in dem, nachdem es auf der rechten Richtung in die restlichen 4 0 ist, berechnet wird, im Uhrzeigersinn erhöht, aber durch Zugabe von 3 4 und dann der Rest, die in der obersten 0 ist, erhöht sich im Uhrzeigersinn, um die restlichen 3 ist es, dass die eingehende Richtung bestimmt.
Nun, die kleine Demo auf diese, bitte verstehen sie gut. Ein tiefes Verständnis von CSS 3D-Transformationen
