«css-transforms» 태그된 질문

CSS를 사용하여 둘 이상을 어떻게 적용 할 수 transform있습니까? 예 : 다음에서는 회전이 아닌 평행 이동 만 적용됩니다. li:nth-child(2) { transform: rotate(15deg); transform: translate(-20px,0px); }

602 css  css-transforms 

일반적인 CSS 환경에서 고정 div가 지정된 위치 ( top:0px, left:0px)에 정확하게 위치하는 상황이 있습니다 . translate3d 변환이있는 부모가 있다면 이것은 존중되지 않는 것 같습니다. 뭔가 보이지 않습니까? 스타일 및 변형 원점 옵션과 같은 다른 웹킷 변환을 시도했지만 운이 없었습니다. JSFiddle 을 첨부했습니다 . 노란색 상자가 컨테이너 요소가 아닌 페이지의 상단 …

140 html  css  css-position  css-transforms 

몇 개의 열이 있으며 그중 일부는 다음 값을 회전하고 싶습니다. http://jsfiddle.net/MTyFP/1/ <div class="container"> <div class="statusColumn"><span>Normal</span></div> <div class="statusColumn"><a>Normal</a></div> <div class="statusColumn"><b>Rotated</b></div> <div class="statusColumn"><abbr>Normal</abbr></div> </div> 이 CSS로 : .statusColumn b { writing-mode: tb-rl; white-space: nowrap; display: inline-block; overflow: visible; transform: rotate(-90deg); transform-origin: 50% 50%; } 다음과 같이 보입니다. 회전 된 요소가 부모의 높이에 …

119 css  css-transforms 

텍스트 줄을 회전하고 배치하는 데 문제가 있습니다. 이제 작동하는 위치입니다. 회전도 작동하지만 위치 지정을 비활성화 한 경우에만 가능합니다. CSS : #rotatedtext { transform-origin: left; transform: rotate(90deg); transform: translate(50%, 50%); } html은 일반 텍스트입니다.

90 css  webkit  transform  css-transforms 

CSS 전환 상태를 전환하기 위해 CSS 전환을 사용하고 있습니다 (기본적으로 요소의 크기 전환). 요소가 전환 될 때 페이지의 나머지 텍스트 (Webkit에서)는 전환이 완료 될 때까지 렌더링을 약간 변경하는 경향이 있습니다. 바이올린 : http://jsfiddle.net/russelluresti/UeNFK/ 나는 또한 이것이 -webkit-font-smoothing: antialiased속성 / 값 쌍이 있는 내 헤더에서 발생하지 않는다는 것을 알았 습니다. 그래서 …

81 css  webkit  css-transitions  css-transforms 

rotateX(50deg) rotateY(20deg) rotateZ(15deg)속기 결합하는 방법 rotate3d()?

79 css  css-transforms 

CSS를 사용하여 롤러 코스터 스타일의 애니메이션을 만들려고합니다. 루프 단계에있을 때 "코스터"를 구부리는 방법을 알고 싶습니다. 모든 CSS 솔루션을 찾고 있지만 약간의 JavaScript가 필요하다면 괜찮습니다. 지금까지 내 코드 : #container { width: 200px; height: 300px; margin-top: 50px; position: relative; animation: 10s infinite loop; animation-timing-function: linear; } #coaster { width: 100px; height: …

15 html  css  css-animations  css-transforms