Калейдоскоп на CSS3 и JavaScript

Во время реальных вещей у детей была очень популярная игрушка -калейдоскоп. Можно было бесконечно долго следить за завораживающей игрой цветных картинок, которые невозможно было повторить. С помощью JavaScript и CSS можно ввести замечательную игрушку в наш виртуальный мир. Возможно, демонстрация будет работать не во всех браузерах, но она все-также очаровывает и притягивает взгляд.

Калейдоскоп состоит из 12 секторов, расположенных по кругу рядом друг с другом. Каждый сектор представлен треугольником с фоновым изображением, которое сдвигается при перемещении курсора мыши над сектором.

<link rel="stylesheet" href="/css/main.css" type="text/css" media="all" />
<script src="/js/jquery.min.js" type="text/javascript"></script>
<script src="/js/main.js" type="text/javascript"></script>

<div class="example">

    <div class="kal_main">
        <div class="kal_cont">
          <div class="ks s1"><div class="ksc"></div></div>
          <div class="ks s2"><div class="ksc"></div></div>
          <div class="ks s3"><div class="ksc"></div></div>
          <div class="ks s4"><div class="ksc"></div></div>
          <div class="ks s5"><div class="ksc"></div></div>
          <div class="ks s6"><div class="ksc"></div></div>
          <div class="ks s7"><div class="ksc"></div></div>
          <div class="ks s8"><div class="ksc"></div></div>
          <div class="ks s9"><div class="ksc"></div></div>
          <div class="ks s10"><div class="ksc"></div></div>
          <div class="ks s11"><div class="ksc"></div></div>
          <div class="ks s12"><div class="ksc"></div></div>
        </div>
    </div>

</div>


Сектора пронумерованы. Каждый из них поворачивается на свой угол и использует свою матрицу преобразований:

body{background:#eee;font-family:Verdana, Helvetica, Arial, sans-serif;margin:0;padding:0}
.example{background:#FFF;width:500px;height:500px;border:1px #000 solid;margin:20px auto;padding:20px;-moz-border-radius:3px;-webkit-border-radius:3px}

/* Общие стили калейдоскопа */
.kal_main{overflow:hidden;width:500px;height:500px;margin:auto}
.kal_cont{width:140%;height:140%;left:-20%;top:-20%;position:relative;margin:auto}
.kal_cont .ks{
-webkit-transform-origin:right top;-moz-transform-origin:right top;-o-transform-origin:right top;transform-origin:right top;
width:50%;height:50%;position:absolute;top:50%;left:0;z-index:10;overflow:hidden;
}
.kal_cont .ksc{
  height:100%;
  width:100%;
  -webkit-transform:rotate(30deg);
  -moz-transform:rotate(30deg);
  -o-transform:rotate(30deg);
  transform:rotate(30deg);
  position:relative;
  -webkit-transform-origin:left top;
  -moz-transform-origin:left top;
  -o-transform-origin:left top;
  transform-origin:left top;
  left:100%;top:0;
  background-image:url(../patterns/pic.jpg)
}

/* Стили каждого сектора */
.kal_cont .s1 {
  -webkit-transform: rotate(-30deg);
  -moz-transform: rotate(-30deg);
  -o-transform: rotate(-30deg);
  transform: rotate(-30deg);
}
.kal_cont .s2 {
  -webkit-transform: rotate(30deg) matrix(-1,0,0,1,0,0);
  -moz-transform: rotate(30deg) matrix(-1,0,0,1,0,0);
  -o-transform: rotate(30deg) matrix(-1,0,0,1,0,0);
  transform: rotate(30deg) matrix(-1,0,0,1,0,0);
}
.kal_cont .s3 {
  -webkit-transform: rotate(30deg);
  -moz-transform: rotate(30deg);
  -o-transform: rotate(30deg);
  transform: rotate(30deg);
}
.kal_cont .s4 {
  -webkit-transform: rotate(90deg) matrix(-1,0,0,1,0,0);
  -moz-transform: rotate(90deg) matrix(-1,0,0,1,0,0);
  -o-transform: rotate(90deg) matrix(-1,0,0,1,0,0);
  transform: rotate(90deg) matrix(-1,0,0,1,0,0);
}
.kal_cont .s5 {
  -webkit-transform: rotate(90deg);
  -moz-transform: rotate(90deg);
  -o-transform: rotate(90deg);
  transform: rotate(90deg);
}
.kal_cont .s6 {
  -webkit-transform: rotate(150deg) matrix(-1,0,0,1,0,0);
  -moz-transform: rotate(150deg) matrix(-1,0,0,1,0,0);
  -o-transform: rotate(150deg) matrix(-1,0,0,1,0,0);
  transform: rotate(150deg) matrix(-1,0,0,1,0,0);
}
.kal_cont .s7 {
  -webkit-transform: rotate(150deg);
  -moz-transform: rotate(150deg);
  -o-transform: rotate(150deg);
  transform: rotate(150deg);
}
.kal_cont .s8 {
  -webkit-transform: rotate(210deg) matrix(-1,0,0,1,0,0);
  -moz-transform: rotate(210deg) matrix(-1,0,0,1,0,0);
  -o-transform: rotate(210deg) matrix(-1,0,0,1,0,0);
  transform: rotate(210deg) matrix(-1,0,0,1,0,0);
}
.kal_cont .s9 {
  -webkit-transform: rotate(210deg);
  -moz-transform: rotate(210deg);
  -o-transform: rotate(210deg);
  transform: rotate(210deg);
}
.kal_cont .s10 {
  -webkit-transform: rotate(270deg) matrix(-1,0,0,1,0,0);
  -moz-transform: rotate(270deg) matrix(-1,0,0,1,0,0);
  -o-transform: rotate(270deg) matrix(-1,0,0,1,0,0);
  transform: rotate(270deg) matrix(-1,0,0,1,0,0);
}
.kal_cont .s11 {
  -webkit-transform: rotate(270deg);
  -moz-transform: rotate(270deg);
  -o-transform: rotate(270deg);
  transform: rotate(270deg);
}
.kal_cont .s12 {
  -webkit-transform: rotate(330deg) matrix(-1,0,0,1,0,0);
  -moz-transform: rotate(330deg) matrix(-1,0,0,1,0,0);
  -o-transform: rotate(330deg) matrix(-1,0,0,1,0,0);
  transform: rotate(330deg) matrix(-1,0,0,1,0,0);
}


Скрипт изменяет положение фона в секторе при перемещении по нему курсора мыши.

В качестве фона используется следующее изображение:

В составе исходников также имеется другой фон для проб:

Источник: http://feedproxy.google.com/~r/ruseller/CdHX/~3/H1rCMKGGRSE/lessons.php

Читать комменты и комментировать

Добавить комментарий / отзыв



Защитный код
Обновить

Калейдоскоп на CSS3 и JavaScript | | 2012-06-19 11:57:51 | | Статьи Web-мастеру | | Во время реальных вещей у детей была очень популярная игрушка -калейдоскоп. Можно было бесконечно долго следить за завораживающей игрой цветных картинок, которые невозможно было повторить. С помощью | РэдЛайн, создание сайта, заказать сайт, разработка сайтов, реклама в Интернете, продвижение, маркетинговые исследования, дизайн студия, веб дизайн, раскрутка сайта, создать сайт компании, сделать сайт, создание сайтов, изготовление сайта, обслуживание сайтов, изготовление сайтов, заказать интернет сайт, создать сайт, изготовить сайт, разработка сайта, web студия, создание веб сайта, поддержка сайта, сайт на заказ, сопровождение сайта, дизайн сайта, сайт под ключ, заказ сайта, реклама сайта, хостинг, регистрация доменов, хабаровск, краснодар, москва, комсомольск |
 
Поделиться с друзьями: