CSS를 사용하여 이미지를 왼쪽으로 이동시키는 방법

CSS에서는 "transform:translateX(px)" 스타일을 사용하여 이미지를 왼쪽으로 이동할 수 있습니다. 변환 속성을 사용하면 요소를 회전, 크기 조정, 이동 또는 기울일 수 있습니다. 값을 "translateX(px)로 설정하세요. )", 즉 패닝이 가능합니다.

이 튜토리얼의 운영 환경: Windows 7 시스템, HTML5&&CSS3 버전 이 방법은 모든 브랜드의 컴퓨터에 적합합니다.

추천: "css Video Tutorial"

css3은 매우 강력하며 단 몇 줄의 코드만으로 매우 좋은 모바일 효과를 얻을 수 있습니다(동적 페이지로 간주되지 않음).

css는 이미지를 왼쪽으로 이동합니다

페이지 구조는 필수적입니다. 여기에 중첩된 구조가 있습니다. img 태그는 이미지를 소개하는 핵심입니다(그러나 효과에 영향을 미치는 핵심은 아닙니다. 미화) 여러분, 경로를 올바르게 도입하기 전에 주의하세요. 중요한 점은 스테이지 div(스테이지)와 컨테이너 div(컨테이너)를 구조화하는 것입니다. 그림 2는 이미지 크기를 조절하여 좀 더 편안하게 만드는 것입니다.

그러면 아래와 같은 스타일이 있습니다. 3D 효과를 구성할 때 스테이지의 기본 스타일 선택입니다(편집자는 이것을 3D 효과의 기초로 사용합니다. 단지 2D 변위용인 경우 이 코드는 물론 스테이지 div를 작성할 필요는 없습니다.) 원근감에 의해 제어되는 원점은 원근감을 제어합니다(모두 3D 관련).

container 이 div는 2D 제어의 핵심입니다. 변위가 핵심 속성입니다. 이 속성은 2D 장면에서 변위를 제어하는 ​​속성입니다. ;

여기에서 div를 3D로 만들 수 있습니다. 그리고 자연스럽게 2D 효과를 얻을 수 있습니다. 전환은 동적 그림 효과를 얻기 위해 전환을 제어하는 ​​것입니다.

동적 효과를 제어하려면 마우스를 사용하여 이미지를 위로 이동하세요. ( :hover 의사 클래스 선택기는 위의 전환 속성과 일치합니다. ); 변환: 변환X(150px), 이는 이미지가 X축의 양의 방향으로 이동하도록 제어합니다.

위 내용은 CSS를 사용하여 이미지를 왼쪽으로 이동시키는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!