CSS dönüşümü tarzı 3d korumak-3d Internet Explorer 11 Geçici çözüm

Merhaba ben böyle bir görünüme neden olur Aşağıdaki css/html kodu: CSS dönüşümü tarzı 3d korumak-3d Internet Explorer 11 Geçici çözüm

  .container{width: 200px;left:300px;top:200px;height: 300px;position: relative;} 
 
      #carousel{width: 100%;height: 100%;position: absolute;perspective:400px;} 
 
      #carousel figure{margin: 0;display: block;position: absolute;width: 200px;height: 200px;left: 10px;top: 10px;border: 1px solid black;} 
 
      #carousel figure:nth-child(1) {transform: rotate3d(0,1,0,0deg);} 
 
      #carousel figure:nth-child(2) {transform: rotate3d(0,1,0,40deg);} 
 
      #carousel figure:nth-child(3) {transform: rotate3d(0,1,0,80deg);} 
 
      #carousel figure:nth-child(4) {transform: rotate3d(0,1,0,120deg);} 
 
      #carousel figure:nth-child(5) {transform: rotate3d(0,1,0,160deg);} 
 
      #carousel figure:nth-child(6) {transform: rotate3d(0,1,0,200deg);} 
 
      #carousel figure:nth-child(7) {transform: rotate3d(0,1,0,240deg);} 
 
      #carousel figure:nth-child(8) {transform: rotate3d(0,1,0,280deg);} 
 
      #carousel figure:nth-child(9) {transform: rotate3d(0,1,0,320deg);}

<!doctyle html><html><section class="container"><div id="carousel"><figure>1</figure><figure>2</figure><figure>3</figure><figure>4</figure><figure>5</figure><figure>6</figure><figure>7</figure><figure>8</figure><figure>9</figure></div></section></html>

Yukarıdaki kod aşağıdaki gibi bir sonuçla sonuçlanan aşağıdaki css/html kodundan türetilmiştir:

.container {width: 210px;left:300px;top:200px;height: 140px;position: relative;perspective: 1000px;} 
 
#carousel {width: 100%;height: 100%;position: absolute;transform-style: preserve-3d;} 
 
#carousel figure {margin: 0;display: block;position: absolute;width: 186px;height: 116px;left: 10px;top: 10px;border: 2px solid black;} 
 
#carousel figure:nth-child(1) { transform: rotateY( 0deg) translateZ(288px); } 
 
#carousel figure:nth-child(2) { transform: rotateY( 40deg) translateZ(288px); } 
 
#carousel figure:nth-child(3) { transform: rotateY( 80deg) translateZ(288px); } 
 
#carousel figure:nth-child(4) { transform: rotateY(120deg) translateZ(288px); } 
 
#carousel figure:nth-child(5) { transform: rotateY(160deg) translateZ(288px); } 
 
#carousel figure:nth-child(6) { transform: rotateY(200deg) translateZ(288px); } 
 
#carousel figure:nth-child(7) { transform: rotateY(240deg) translateZ(288px); } 
 
#carousel figure:nth-child(8) { transform: rotateY(280deg) translateZ(288px); } 
 
#carousel figure:nth-child(9) { transform: rotateY(320deg) translateZ(288px); }

<!doctyle html><html><section class="container"><div id="carousel"><figure>1</figure><figure>2</figure><figure>3</figure><figure>4</figure><figure>5</figure><figure>6</figure><figure>7</figure><figure>8</figure><figure>9</figure></div></section></html>

Sorum ben dönüşümü tarzı kullanmadan alt kodu gibi bir ekran sonuçlanması üst css/html kodunu nasıl değiştirebileceğiniz geçerli: korumak-3d, Sebebi çünkü korumak-3d internet explorer 11 ile uyumlu değildir.

Herhangi bir yardım büyük takdir edilecektir.

orijinal kod bu sayfada bir öğretici yapılmadı: 3d Carousel tutorial

kaynak

2016-03-23 Paul Ishak

Yani bu sorunun cevabı beri muhafaza-3d ben den perspektif özelliğini taşımak olduğunu, internet explorer 11 içinde yok edildi Üst kapsayıcıyı (kapsayıcıyı) atlı karıncaya indirir.

bakınız kodu snipped:

.container {width: 210px;left:300px;top:200px;height: 140px;position: relative;} 
 
#carousel 
 
{ 
 
    width: 100%; 
 
    height: 100%; 
 
    position: absolute; 
 
    perspective: 1000px; 
 
} 
 
#carousel figure 
 
{ 
 
    margin: 0; 
 
    display: block; 
 
    position: absolute; 
 
    width: 186px; 
 
    height: 116px; 
 
    left: 10px; 
 
    top: 10px; 
 
    border: 2px solid black; 
 
} 
 
#carousel figure:nth-child(1) { transform: rotateY( 0deg) translateZ(288px); } 
 
#carousel figure:nth-child(2) { transform: rotateY( 40deg) translateZ(288px); } 
 
#carousel figure:nth-child(3) { transform: rotateY( 80deg) translateZ(288px); } 
 
#carousel figure:nth-child(4) { transform: rotateY(120deg) translateZ(288px); } 
 
#carousel figure:nth-child(5) { transform: rotateY(160deg) translateZ(288px); } 
 
#carousel figure:nth-child(6) { transform: rotateY(200deg) translateZ(288px); } 
 
#carousel figure:nth-child(7) { transform: rotateY(240deg) translateZ(288px); } 
 
#carousel figure:nth-child(8) { transform: rotateY(280deg) translateZ(288px); } 
 
#carousel figure:nth-child(9) { transform: rotateY(320deg) translateZ(288px); }

<!doctyle html><html><section class="container"><div id="carousel"><figure>1</figure><figure>2</figure><figure>3</figure><figure>4</figure><figure>5</figure><figure>6</figure><figure>7</figure><figure>8</figure><figure>9</figure></div></section></html>

kaynak

2016-03-23 16:42:08

CSS dönüşümü tarzı 3d korumak-3d Internet Explorer 11 Geçici çözüm

cevap

İlgili konular