Angular4 allows you to hover the mouse over 3d skews, while angular4 allows you to hover over 3d skews.

Angular4 allows you to hover the mouse over 3d skews, while angular4 allows you to hover over 3d skews.

What is Angular?

Angular is a framework developed and maintained by Google to develop cross-platform applications. It is also applicable to mobile phones and desktops.

What are the characteristics of Angular?

Based on Angular, we can build applications suitable for all platforms. For example, Web applications, mobile Web applications, mobile applications, and desktop applications.

Through Web Worker and server-side rendering (SSR), we can achieve the highest rendering speed on today's Web platforms.

Angular allows you to effectively control scalability. Based on RxJS, Immutable. js, and other push models, it can meet the needs of massive data volumes.

What functions does Angular provide?

Dynamic HTML
Powerful form system (template-driven and model-driven)
Powerful view Engine
Event Processing
Quick Page Rendering
Flexible Routing
HTTP service
View Encapsulation
AOT, Tree Shaking

What is the difference between Angular and AngularJS?

No more Controller and Scope
Better componentization and code reuse
Better mobile support
Introduction of RxJS and Observable
Zone. js is introduced to provide more intelligent change detection.

This effect is the effect of the hammer technology official website. The effect is slightly different from the drop-by-drop portal, and the overall effect is okay.

Which of the following is the difficulty?

If it is written in native mode, everyone will write it, but for beginners of angular, for example, I decided to write it when the whole person is anonymous, and I will write it in native mode, but let me write with angular. I don't know where to start...

Use angular commands to package this effect in one command. Next time you want to use this command, it is not too convenient to use it. (add a command as needed and then pull it ),

1. Operate mouse events and PASS Parameters in angular commands,

2. How to get the event object of the mouse operation object is the same as that of the native

3. How can I obtain and manipulate various attributes of an object?

I still don't know when I do this... View the blog information .. I know it was written here.

 @HostListener('mousemove') onMouseMove(para) {} @HostListener('mousemove') onMouseMove(para) { let e= para ||window.event; }

 export class DirectivesDirective { constructor(private el: ElementRef) { } @HostListener('mousemove') onMouseMove(para) { let e= para ||window.event; let divTop = this.el.nativeElement.offsetTop; ... }}

After understanding the basic structure above, we can achieve this effect. After all, the logic is the same.

Directly paste code

import {Directive, ElementRef, HostListener} from '@angular/core';@Directive({ selector: '[appDirectives]'})export class DirectivesDirective {// public el; private distance = 50; private rotationMultiple = 0.1 constructor(private el: ElementRef) { this.distance = 50; this.rotationMultiple = 0.1 } @HostListener('mousemove') onMouseMove(para) { let e= para ||window.event; let divTop = this.el.nativeElement.offsetTop; let divLeft = this.el.nativeElement.offsetLeft; let divWidth = this.el.nativeElement.offsetWidth; let divHeight =this.el.nativeElement.offsetHeight; if(e.clientX < divWidth/2 && e.clientY > divHeight/2 || e.clientX > divWidth/2 && e.clientY > divHeight/2) { // 3.4 let pctX =(((e.clientX - divLeft)/ divWidth) - 0.5); let pctY = -(((e.clientY - divTop)/ divHeight) - 0.3); this.animate(pctX, pctY, this.rotationMultiple, this.distance); } if(e.clientX < divWidth/2 && e.clientY < divHeight/2 || e.clientX > divWidth/2 && e.clientY < divHeight/2) { // 1.2 let pctX =((e.clientX - divLeft)/ divWidth) - 0.7; let pctY = ((e.clientY - divTop)/ divHeight) - 0.5; this.animate(pctX, pctY, this.rotationMultiple, this.distance); } } private animate(pctX: number, pctY: number, rotationMultiple: number, distance: number) { let rotateX = pctY * rotationMultiple * -180; let rotateY = pctX * rotationMultiple * 180; this.el.nativeElement.style.transform = ' rotateX(' + rotateX + 'deg' + ')' + ' rotateY(' + rotateY + 'deg'+ ')'; }}

Wow, this tool is a little confused,

Summary

The above is the Angular4 introduced by xiaobian, which enables you to hover your mouse over a 3d tilt. I hope it will be helpful to you. If you have any questions, please leave a message and I will reply to you in a timely manner. Thank you very much for your support for the help House website!