CSS3의transform을 이용한 동적 시계

17319 단어 transform
최근 HTML5+CSS3와 관련된 게임 개발이 뜨겁습니다. 저도 시대의 흐름을 따라가야 하기 때문에 CSS3의 작은 데모를 만들어서 여러분께 조언을 드리겠습니다.
1. transform과 transform-origin 사용 설명
현재 이 두 속성은 주류 브라우저IE, 웹키트, Firefox,opera의 지원을 받았고 속성명은 각각-ms-transform-웹키트-transform,-moz-transform,-o-transform이다.어떤 사람들은 왜 각 브라우저의 접두사(-ms-)를 붙여야 하는지 의문이 있을 수 있습니다. 본인은 브라우저의 새로운 버전이 발표될 때 이 CSS 속성은 아직 정식으로 W3 조직에 의해 표준적으로 발표되지 않았기 때문에 접두사를 붙여서 구분하면 앞으로 모든 브라우저는transform과trandform-origin을 통일적으로 사용할 것이라고 생각합니다.
최신 CSS 표준 참조 웹 사이트: http://www.w3.org/Style/CSS/current-work.
IE9 개발자 가이드 웹 사이트: http://msdn.microsoft.com/en-us/ie/ff468705.
웹키 개발 자료: http://www.webkit.org/projects/documentation/index.html,http://developer.apple.com/devcenter/safari/index.action.
Firefox 개발 자료: https://developer.mozilla.org/En/Developer_Guide.
opera 개발 자료: http://dev.opera.com/articles/view/wcl-developer-guide/.
transform-origin은 변형 원점, 즉 이 요소가 그 점을 둘러싸고 변형되거나 회전하는 것이다. 이 속성은transform 속성을 설정할 때만 작용한다. 이 속성은 두 개의 매개 변수를 받아들인다. 이들은 백분율,em,px 등 구체적인 값일 수도 있고left,center,right,또는 top,center,bottom 등 묘사적인 매개 변수일 수도 있다.기본값은 50%, 50% 입니다.
top left | left top 등가는 0 0입니다.| top center | center top 등가 50% 0right top | top right 등가 100% 0left | left center | center 등가 0 50% center | center 등가 50% right center | center right 등가 100% 50% bottom left | left left left | left bottom 등가 0 100% bottom | bottom center | centom | center bottom 등가 50% 100% bottom
transform 속성은 사용 가능SVG에서 실현할 수 있는 같은 기능을 실현했다.이것은 내부 연결 (inline) 요소와 블록 레벨 (block) 요소에 사용할 수 있습니다.요소를 회전, 배율 조정 및 이동할 수 있게 해주며 다음과 같은 속성 값 매개변수가 있습니다.
rotate (회전) 는 도수치를 전달해서 대상을 돌릴 수 있도록 합니다.scale는 모든 요소를 더 크게 만들 수 있는 축소 기능입니다.그것은 하나 또는 두 개의 양수와 음수, 그리고 소수를 매개 변수로 사용한다.매개변수를 사용할 때 X축과 Y축의 배율이 동일함을 나타냅니다.translate는 X와 Y 좌표를 바탕으로 원소를 재배치하여 하나의 파라미터를 사용할 때 X축과 Y축의 파라미터가 같다는 것을 나타낸다.skew 경사(ps의 사절)는 매개 변수가 도수이고 하나의 매개 변수를 사용할 때 X축과 Y축의 매개 변수가 같다는 것을 나타낸다.matrix 매트릭스 변환은 X와 Y 좌표를 바탕으로 원소를 재배치하고 6개의 매개 변수를 사용한다.
2. 동적 클록 페이지의 HTML + CSS
HTML 코드:
<div id="clock">

        <div id="dot"></div>

        <div id="second" class="needle">

            <div id="second_needle">

            </div>

        </div>

        <div id="minute" class="needle">

            <div id="minute_needle">

            </div>

        </div>

        <div id="hour" class="needle">

            <div id="hour_needle">

            </div>

        </div>

    </div>

코드의 각 DIV의 의미는 해석하지 않으니 모두가 알아볼 수 있을 거라고 믿습니다.HTML은 그래도 매우 간단하다. 작용하는 데는 CSS도 보아야 한다.
관련 CSS 코드:
<style type="text/css"> 

#clock{

    width: 200px;

    height: 200px;

    border: 1px solid black;

    border-radius: 100px;

    position:relative;

     margin:0 auto;

    background-color:#eee;

}

#dot{

    border-radius:2px;

    width: 8px;

    height: 8px;

    position:absolute;

    top: 0;

    bottom: 0;

    margin: auto;

    left: 0;

    right: 0;

    background: black;

}

.needle

{

    -ms-transform-origin: 50% 100%;

    -webkit-transform-origin: 50% 100%;

    -moz-transform-origin: 50% 100%;

    -o-transform-origin: 50% 100%;

    transform-origin:50% 100%;

}

#second{

    position:relative;

    z-index:5;

    height: 80px;

    width: 1px;

    margin: 20px auto;

}

#second_needle{

    height: 100%;

    width: 100%;

    position: relative;

    background: green;

}

#minute{

    z-index:4;

    height: 60px;

    width: 4px;

    position: absolute;

    top: 40px;

    left: 0px;

    right: 0px;

    margin: auto;

}

#minute_needle{

    height: 100%;

    width: 100%;

    background: blue;

}

#hour{

    z-index:3;

    height: 40px;

    width: 8px;

    position: absolute;

    top: 60px;

    left: 0px;

    right: 0px;

    margin: auto;

}

#hour_needle{

    height: 100%;

    width: 100%;

    background: red;

}

</style>

다음은 몇 가지 관건적인 CSS 속성을 설명합니다: #clock 안의 블록 요소의position:absolute;그리고 top로 사용하기;bottom; margin; left; right; 각 시계의 회전 원점은 밑부분의 중점:transform-origin:50% 100%;
3. 페이지의 자바스크립트의 실현
가장 중요한 것은 JS 코드입니다.
<script type="text/javascript">

//         

window.onload = function(){

var date = new Date(),

second = date.getSeconds(),

minute = date.getMinutes(),

minuteDeg,

hour = date.getHours(),

hourDeg;

var secondrotate = 'rotate('+second*6+'deg)';

var scss = '-moz-transform:' + secondrotate + ';-o-transform:' + secondrotate + ';-ms-transform:' + secondrotate;

// ? úwebkit ? ˉ à ÷, a a ù ¨ ?

document.getElementById('second').style.cssText = scss;

document.getElementById('second').style.webkitTransform = secondrotate;



minuteDeg = minute*6 + second*6/60;

var minuterotate = 'rotate('+minuteDeg+'deg)';

var minutecss = '-moz-transform:' + minuterotate + ';-o-transform:' + minuterotate + ';-ms-transform:' + minuterotate ;

document.getElementById('minute').style.cssText = minutecss;

document.getElementById('minute').style.webkitTransform = minuterotate; // ? úwebkit ? ˉ à ÷, a a ù ¨ ?

if(hour>12){

    hour = hour -12;

}

hourDeg = hour * 30 + minute*30/60;

var hourtrotate = 'rotate('+hourDeg+'deg)';

var hcss = '-moz-transform:' + hourtrotate + ';-o-transform:' + hourtrotate + ';-ms-transform:' + hourtrotate;

document.getElementById('hour').style.cssText = hcss;

document.getElementById('hour').style.webkitTransform = hourtrotate; // ? úwebkit ? ˉ à ÷, a a ù ¨ ?



}; 



// ü ú ? ? ? ? ó ? ? ?

setInterval(function(){

var date = new Date(),

second = date.getSeconds();



var secondrotate = 'rotate('+second*6+'deg)';

var scss = '-moz-transform:' + secondrotate + ';-o-transform:' + secondrotate + ';-ms-transform:' + secondrotate ;

document.getElementById('second').style.cssText = scss;

document.getElementById('second').style.webkitTransform = secondrotate; // ? úwebkit ? ˉ à ÷, a a ù ¨ ?



},1000)



// ü ú ? ? ? ? ó ? ? ?

setInterval(function(){

var date = new Date(),

second = date.getSeconds(),

minute = date.getMinutes(),

minuteDeg;

minuteDeg = minute*6 + second*6/60;

var minuterotate = 'rotate('+minuteDeg+'deg)';

var minutecss = '-moz-transform:' + minuterotate + ';-o-transform:' + minuterotate + ';-ms-transform:' + minuterotate ;

document.getElementById('minute').style.cssText = minutecss;

document.getElementById('minute').style.webkitTransform = minuterotate; // ? úwebkit ? ˉ à ÷, a a ù ¨ ?



},6000)



// ü ú ? ? ? ± ó ? ? ?

setInterval(function(){

var date = new Date(),

second = date.getSeconds(),

minute = date.getMinutes(),

hour = date.getHours(),

hourDeg;



if(hour>12){

    hour = hour -12;

}

hourDeg = hour * 30 + minute*30/60;

var hourtrotate = 'rotate('+hourDeg+'deg)';

var hcss = '-moz-transform:' + hourtrotate + ';-o-transform:' + hourtrotate + ';-ms-transform:' + hourtrotate;

document.getElementById('hour').style.cssText = hcss;

document.getElementById('hour').style.webkitTransform = hourtrotate; // ? úwebkit ? ˉ à ÷, a a ù ¨ ?



},360000)

</script>

 
최종 효과 프레젠테이션:http://1.kuangwenwang.sinaapp.com//CSS3clock.html
문자 일치 실현
[알고리즘 학습] 복잡 한 링크 복사

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage