Здравствуйте, сегодня будем преобразовывать картинку в сферу с помощью только CSS без использования скриптов.

Скачать исходники для статьи можно ниже

Любую картинку, изображение преобразуем в сферу:

1.1. Первое, что нужно это создать div блок:

<div class="bille"></div>

Для сайтов на wordpress: для того чтобы вставить сферу в запись (пост) – нужно открыть “Редактор записи” во вкладке (“Текст” (“HTML”) – не “Визуальный редактор”) и в нужном месте (где вы хотите видеть данную сферу) вставить код.

1.2. А далее прописать к div блоку CSS стили:
Для wordpress сайтов нижеуказанный код нужно вставить в файл стилей (style.css) – для этого в панели управления wordpress выбираем пункт “Внешний вид” и его подпункт “Редактор”, далее справа в списке шаблонов выбираем файл – style.css (в разных темах он может называться по разному, однако, в большинстве случаев именно style.css) и в самый низ вставляем данный код:

.bille {
  position: relative;
  width: 400px;
  height: 400px;
  background: url(/wp-content/uploads/2014/01/ugolok1.gif) center center;
  background-size: cover;
  border-radius: 200px;
  margin: 50px auto;
  border: 1px solid rgba(0,0,0,1);
  box-shadow:
    0 0 10px 1px #000 /* border */
    ,50px 50px 50px -80px rgba(255,255,255,1) inset /* white side */
    ,100px 100px 80px -50px rgba(255,255,255,0.1) inset /* white side */
    ,-50px -50px 50px -80px rgba(0,0,0,0.5) inset /* black side */
    ,-100px -100px 80px -50px rgba(0,0,0,0.5) inset /* black side */
    ,0 0 50px 20px rgba(15,40,60,1) inset /* blue color */
    ,0 0 70px 55px rgba(15,40,60,0.9) inset /* blue color */
    ,0 0 100px 70px rgba(15,40,60,0.3) inset /* blue color */
    ,10px 10px 30px 0px rgba(0,0,0,0.7) /* shadow */
    ,10px 10px 20px 0px rgba(15,40,60,0.8) /* shadow */
    ,30px 30px 60px 10px rgba(15,40,60,0.8) /* shadow */
    ,50px 50px 50px 30px rgba(15,40,60,0.2) /* shadow */
    ;
}
/* large reflect */
.bille:before {
  content: '';
  width: 80px;
  height: 25px;
  background: rgba(255,255,255,0.4);
  position: absolute;
  box-shadow:
    0 0 3px 1px rgba(255,255,255,0.1),
    0 0 20px 10px rgba(255,255,255,0.4);
  border-radius: 50%;
  transform: rotate(-35deg);
  top: 70px;
  left: 80px;
}
/* small reflect */
.bille:after {
  content: '';
  width: 30px;
  height: 10px;
  background: rgba(255,255,255,0.4);
  position: absolute;
  box-shadow:
    0 0 3px 1px rgba(255,255,255,0.1),
    0 0 10px 5px rgba(255,255,255,0.4);
  border-radius: 50%;
  transform: rotate(-70deg);
  top: 150px;
  left: 50px;
}

, где “/wp-content/uploads/2014/01/ugolok1.gif” – путь до картинки, которую нужно поместить в сферу.

Демо-пример можно посмотреть тут: 3d сфера на CSS