집 >웹 프론트엔드 >CSS 튜토리얼 >CSS 변환 변환

CSS 변환 변환

高洛峰원래의: 2016-11-17 14:11:231273검색

transition: 전환 속성

transition-property는 전환 효과를 설정하는 CSS 속성의 이름을 지정합니다. 기본적으로

transition-duration은 몇 초 또는 몇 초를 지정하는지 지정할 수 있습니다. 전환 효과를 완료하는 데 걸리는 시간(밀리초)

transition-timing-function: 기본 easytransition-delay: 지연 시간

ease: 점차적으로 느려짐

linear: 일정한 속도

ease-in: 가속

ease-out: 감속

ease-in-out: 먼저 가속한 다음 감속

cubic-bezier: 베지어 곡선

Transitionend : 오버완료 이벤트

function addEnd(obj,fn){
    obj.addEventListener(&#39;WebkitTransitionEnd&#39;,fn,false);
    obj.addEventListener(&#39;transitionend&#39;,fn,false);
}
function removeEnd(obj,fn){
    obj.removeEventListener(&#39;WebkitTransitionEnd&#39;,fn,false);
    obj.removeEventListener(&#39;transitionend&#39;,fn,false);
}

주의사항 1. 트랜지션에서 여러개 작성시 스타일을 한번 변경하지 않으면 이벤트가 한번 발생합니다. Transitionend 이벤트를 반복적으로 트리거하는 데 주의하세요. 예를 들어 다음은 div

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #nav{position: absolute;left:0;top:0;width: 100px;height: 100px;background: gray;transition: 1s all;}
    </style>
</head>
<body>
<div id="nav"></div>
<script>
    var oHome=document.getElementById("nav");
    var count = 10;
    oHome.onclick = function(){
        count += 20;
        oHome.style.transform = &#39;translate(0,&#39;+ count +&#39;px)&#39;
        addEnd(this,function(){
            count += 20;
            oHome.style.transform = &#39;translate(0,&#39;+ count +&#39;px)&#39;
        })
    }
    function addEnd(obj,fn) {
        obj.addEventListener(&#39;WebkitTransitionEnd&#39;,fn,false);
        obj.addEventListener(&#39;transitionend&#39;,fn,false);
    }
</script>
</body>
</html>

CSS 변환 변환

transform:Transform

rotation:rotate():degree

oblique Cut: Skew(): Degree

skewX

skewY　

Scale: scale(): 양수, 음수, 소수

scaleX

scaleY

Displacement:translate(): CSS에서 지원하는 모든 단위를 사용할 수 있습니다.

translateX

translateY 실행

transform: scale(2)rotate(50deg); 먼저 회전을 수행한 후 스케일링을 수행합니다

위 변환의 값도 중심점(변환-원점)을 기준으로 합니다. ) 변경

성명：

이전 기사：CSS3 애니메이션 모니터링 및 일시정지다음 기사：CSS3 애니메이션 모니터링 및 일시정지

CSS 변환 변환

관련 기사