Как не наследовать св-во transform?

142

17 мая 2019, 17:40

Коллеги, подскажите. Обхожу li и ставлю активный класс с увеличение scale 1.2. Но мне требуется, что бы вложенные элементы не увеличивались. Это реально?

Задача: увеличивать только оранжевый прямоугольник.

	function doSetTimeout(i) { 
		setTimeout(function() { 
			jQuery(".work__item-" + i).addClass("work__item--active"); 
			jQuery(".work__item-" + i).siblings().removeClass("work__item--active") 
		}, i * 1000) 
	} 
	function myFuncSuper() { 
		for (let i = 0; i <= 6; i++) { 
			doSetTimeout(i) 
		} 
	} 
	myFuncSuper(); 
	setInterval(myFuncSuper, 6000);

.work__list { 
  display: -webkit-box; 
  display: -ms-flexbox; 
  display: flex; 
  -webkit-box-pack: justify; 
      -ms-flex-pack: justify; 
          justify-content: space-between; 
  margin-top: 60px; 
  padding: 145px 0; } 
 
.work__item { 
  position: relative; 
  width: 170px; 
  height: 48px; 
   
  background-color:orange; 
  -webkit-transition: .3s; 
  transition: .3s; 
  display: -webkit-box; 
  display: -ms-flexbox; 
  display: flex; 
  -webkit-box-align: center; 
      -ms-flex-align: center; 
          align-items: center; 
  -webkit-box-pack: center; 
      -ms-flex-pack: center; 
          justify-content: center; } 
  .work__item--active { 
    -webkit-transform: scale(1.2); 
            transform: scale(1.2); } 
  .work__item-1:after { 
    content: "01"; 
    font-family: MuseoSansCyrl; 
    color: #ffffff; 
    font-size: 24px; 
    font-weight: 700; } 
  .work__item-2:after { 
    content: "02"; 
    font-family: MuseoSansCyrl; 
    color: #ffffff; 
    font-size: 24px; 
    font-weight: 700; } 
  .work__item-3:after { 
    content: "03"; 
    font-family: MuseoSansCyrl; 
    color: #ffffff; 
    font-size: 24px; 
    font-weight: 700; } 
  .work__item-4:after { 
    content: "04"; 
    font-family: MuseoSansCyrl; 
    color: #ffffff; 
    font-size: 24px; 
    font-weight: 700; } 
  .work__item-5:after { 
    content: "05"; 
    font-family: MuseoSansCyrl; 
    color: #ffffff; 
    font-size: 24px; 
    font-weight: 700; } 
  .work__item-6:after { 
    content: "06"; 
    font-family: MuseoSansCyrl; 
    color: #ffffff; 
    font-size: 24px; 
    font-weight: 700; } 
 
.work-icon__wrapp { 
  position: absolute; 
  top: 100px; 
  left: 50%; 
  -webkit-transform: translateX(-50%); 
          transform: translateX(-50%); 
  border-radius: 50%; 
  border: solid 4px #d9d9d9; 
  width: 82px; 
  height: 82px; 
  background: center center no-repeat; } 
  .work-icon__wrapp:after { 
    position: absolute; 
    font-family: MuseoSansCyrl; 
    color: #000000; 
    font-size: 16px; 
    top: 0; 
    left: 90px; 
    width: 160px; 
    height: 84px; 
    display: -webkit-box; 
    display: -ms-flexbox; 
    display: flex; 
    -webkit-box-align: center; 
        -ms-flex-align: center; 
            align-items: center; } 
  .work-icon__wrapp:before { 
    content: ""; 
    position: absolute; 
    display: block; 
    top: -60px; 
    left: 50%; 
    -webkit-transform: translateX(-50%); 
            transform: translateX(-50%); 
    width: 1px; 
    height: 55px; 
    border-right: 1px dashed #f35c17; } 
  .work-icon__wrapp--even { 
    top: -140px; } 
    .work-icon__wrapp--even:after { 
      right: 90px; 
      text-align: right; 
      left: initial; 
      -webkit-box-pack: end; 
          -ms-flex-pack: end; 
              justify-content: flex-end; } 
    .work-icon__wrapp--even:before { 
      top: initial; 
      bottom: -60px; } 
 
.work-icon-call { 
  background-image: url(../img/Work/call.png); } 
  .work-icon-call:after { 
    content: "Звонок, предварительное обсуждение проекта и выезд на замеры"; } 
.work-icon-contract { 
  background-image: url(../img/Work/contract.png); } 
  .work-icon-contract:after { 
    content: "Составление \a             Тех Задания и подписание договора"; } 
.work-icon-management { 
  background-image: url(../img/Work/management.png); } 
  .work-icon-management:after { 
    content: "Работа над эскизной частью проекта, согласование концепции интерьера"; } 
.work-icon-sketch { 
  background-image: url(../img/Work/sketch.png); } 
  .work-icon-sketch:after { 
    content: "Выполнение \a             рабочих чертежей, завершение работы над проектом"; } 
.work-icon-builder { 
  background-image: url(../img/Work/builder.png); } 
  .work-icon-builder:after { 
    content: "Авторское сопровождение ремонтных работ"; } 
.work-icon-couch { 
  background-image: url(../img/Work/couch.png); } 
  .work-icon-couch:after { 
    content: "Комплектация"; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
<ul class="work__list"> 
                    <li class="work__item work__item-1"> 
                        <div class="work-arrow work-arrow-1"></div> 
                        <div class="work-icon__wrapp work-icon-call"></div> 
                    </li> 
                    <li class="work__item work__item-2"> 
                        <div class="work-arrow work-arrow-2"></div> 
                        <div class="work-icon__wrapp work-icon__wrapp--even work-icon-contract"></div> 
                        
                    </li> 
                    <li class="work__item work__item-3"> 
                        <div class="work-arrow work-arrow-3"></div> 
                        <div class="work-icon__wrapp work-icon-management"></div> 
                    </li> 
                    <li class="work__item work__item-4"> 
                        <div class="work-arrow work-arrow-4"></div> 
                        <div class="work-icon__wrapp work-icon__wrapp--even work-icon-sketch"></div> 
                    </li> 
                    <li class="work__item work__item-5"> 
                        <div class="work-arrow work-arrow-5"></div> 
                        <div class="work-icon__wrapp work-icon-builder"></div> 
                    </li> 
                    <li class="work__item work__item-6"> 
                        <div class="work-arrow work-arrow-6"></div> 
                        <div class="work-icon__wrapp work-icon__wrapp--even work-icon-couch"></div> 
                    </li> 
                </ul>

Answer 1

Пример

function doSetTimeout(i) { 
  setTimeout(function() { 
    jQuery(".work__item-" + i).addClass("work__item--active"); 
    jQuery(".work__item-" + i).siblings().removeClass("work__item--active") 
  }, i * 1000) 
} 
 
function myFuncSuper() { 
  for (let i = 0; i <= 6; i++) { 
    doSetTimeout(i) 
  } 
} 
myFuncSuper(); 
setInterval(myFuncSuper, 6000);

.work__list { 
  display: -webkit-box; 
  display: -ms-flexbox; 
  display: flex; 
  -webkit-box-pack: justify; 
  -ms-flex-pack: justify; 
  justify-content: space-between; 
  margin-top: 60px; 
  padding: 145px 0; 
} 
 
.work__item { 
  position: relative; 
  width: 170px; 
  height: 48px; 
  background-color: orange; 
  -webkit-transition: .3s; 
  transition: .3s; 
  display: -webkit-box; 
  display: -ms-flexbox; 
  display: flex; 
  -webkit-box-align: center; 
  -ms-flex-align: center; 
  align-items: center; 
  -webkit-box-pack: center; 
  -ms-flex-pack: center; 
  justify-content: center; 
} 
.work__item:before{ 
   content: ''; 
   position: absolute; top: 0; left: 0; 
   width: 100%; 
   height: 100%; 
   background-color: orange; 
   transition: .3s; 
   z-index: -1; 
} 
.work__item--active:before{ 
  -webkit-transform: scale(1.2); 
  transform: scale(1.2); 
} 
 
 
 
.work__item-1:after { 
  content: "01"; 
  font-family: MuseoSansCyrl; 
  color: #ffffff; 
  font-size: 24px; 
  font-weight: 700; 
} 
 
.work__item-2:after { 
  content: "02"; 
  font-family: MuseoSansCyrl; 
  color: #ffffff; 
  font-size: 24px; 
  font-weight: 700; 
} 
 
.work__item-3:after { 
  content: "03"; 
  font-family: MuseoSansCyrl; 
  color: #ffffff; 
  font-size: 24px; 
  font-weight: 700; 
} 
 
.work__item-4:after { 
  content: "04"; 
  font-family: MuseoSansCyrl; 
  color: #ffffff; 
  font-size: 24px; 
  font-weight: 700; 
} 
 
.work__item-5:after { 
  content: "05"; 
  font-family: MuseoSansCyrl; 
  color: #ffffff; 
  font-size: 24px; 
  font-weight: 700; 
} 
 
.work__item-6:after { 
  content: "06"; 
  font-family: MuseoSansCyrl; 
  color: #ffffff; 
  font-size: 24px; 
  font-weight: 700; 
} 
 
.work-icon__wrapp { 
  position: absolute; 
  top: 100px; 
  left: 50%; 
  -webkit-transform: translateX(-50%); 
  transform: translateX(-50%); 
  border-radius: 50%; 
  border: solid 4px #d9d9d9; 
  width: 82px; 
  height: 82px; 
  background: center center no-repeat; 
} 
 
.work-icon__wrapp:after { 
  position: absolute; 
  font-family: MuseoSansCyrl; 
  color: #000000; 
  font-size: 16px; 
  top: 0; 
  left: 90px; 
  width: 160px; 
  height: 84px; 
  display: -webkit-box; 
  display: -ms-flexbox; 
  display: flex; 
  -webkit-box-align: center; 
  -ms-flex-align: center; 
  align-items: center; 
} 
 
.work-icon__wrapp:before { 
  content: ""; 
  position: absolute; 
  display: block; 
  top: -60px; 
  left: 50%; 
  -webkit-transform: translateX(-50%); 
  transform: translateX(-50%); 
  width: 1px; 
  height: 55px; 
  border-right: 1px dashed #f35c17; 
} 
 
.work-icon__wrapp--even { 
  top: -140px; 
} 
 
.work-icon__wrapp--even:after { 
  right: 90px; 
  text-align: right; 
  left: initial; 
  -webkit-box-pack: end; 
  -ms-flex-pack: end; 
  justify-content: flex-end; 
} 
 
.work-icon__wrapp--even:before { 
  top: initial; 
  bottom: -60px; 
} 
 
.work-icon-call { 
  background-image: url(../img/Work/call.png); 
} 
 
.work-icon-call:after { 
  content: "Звонок, предварительное обсуждение проекта и выезд на замеры"; 
} 
 
.work-icon-contract { 
  background-image: url(../img/Work/contract.png); 
} 
 
.work-icon-contract:after { 
  content: "Составление \a             Тех Задания и подписание договора"; 
} 
 
.work-icon-management { 
  background-image: url(../img/Work/management.png); 
} 
 
.work-icon-management:after { 
  content: "Работа над эскизной частью проекта, согласование концепции интерьера"; 
} 
 
.work-icon-sketch { 
  background-image: url(../img/Work/sketch.png); 
} 
 
.work-icon-sketch:after { 
  content: "Выполнение \a             рабочих чертежей, завершение работы над проектом"; 
} 
 
.work-icon-builder { 
  background-image: url(../img/Work/builder.png); 
} 
 
.work-icon-builder:after { 
  content: "Авторское сопровождение ремонтных работ"; 
} 
 
.work-icon-couch { 
  background-image: url(../img/Work/couch.png); 
} 
 
.work-icon-couch:after { 
  content: "Комплектация"; 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
<ul class="work__list"> 
  <li class="work__item work__item-1"> 
    <div class="work-arrow work-arrow-1"></div> 
    <div class="work-icon__wrapp work-icon-call"></div> 
  </li> 
  <li class="work__item work__item-2"> 
    <div class="work-arrow work-arrow-2"></div> 
    <div class="work-icon__wrapp work-icon__wrapp--even work-icon-contract"></div> 
 
  </li> 
  <li class="work__item work__item-3"> 
    <div class="work-arrow work-arrow-3"></div> 
    <div class="work-icon__wrapp work-icon-management"></div> 
  </li> 
  <li class="work__item work__item-4"> 
    <div class="work-arrow work-arrow-4"></div> 
    <div class="work-icon__wrapp work-icon__wrapp--even work-icon-sketch"></div> 
  </li> 
  <li class="work__item work__item-5"> 
    <div class="work-arrow work-arrow-5"></div> 
    <div class="work-icon__wrapp work-icon-builder"></div> 
  </li> 
  <li class="work__item work__item-6"> 
    <div class="work-arrow work-arrow-6"></div> 
    <div class="work-icon__wrapp work-icon__wrapp--even work-icon-couch"></div> 
  </li> 
</ul>

ПОСЛЕДНИЕ ВОПРОСЫ

21:33

Виртуальный выделенный сервер (VDS) становится отличным выбором
22:26
22:40

Создание игр для детей: первые шаги в IT мире
08:34
15:01

Основные задачи SEO оптимизатора
17:01
11:24

Выделенный сервер для игр: преимущества и недостатки
10:16
17:54

Все вопросы

ТОП-10

Все популярные вопросы

Как проверить innertext или text(jquery) на null

Есть задача добавляять в список дел , через promptНо я не могу выйти нормально из цикла тк innertext or text от propmt при cancel (null) возвращает значение пустой...

160

javascript