Attempt at infinite zooming

md.shakil hossain

1706

<div class='container'>
  <div class='square'>
    <div class='inner'>
      <div class='inner'>
        <div class='inner'>
          <div class='inner'>
            <div class='inner'>
              <div class='inner'>
                <div class='inner'>
                  <div class='inner'>
                    <div class='inner'>
                      <div class='inner'>
                        <div class='inner'>
                          <div class='inner'>
                            <div class='inner'>
                              <div class='inner'>
                                <div class='inner'>
                                  <div class='inner'>
                                    <div class='inner'>
                                      <div class='inner'>
                                        <div class='inner'>

Try it Yourself >>

.container {
  position:relative;
  width:100%;
  height: 0;
  padding-bottom: 100%;
}
.square { 
  position:absolute;
  top:50%; left:50%;
  -webkit-animation:enlarge 2s infinite;
  animation:enlarge 2s infinite;
  -webkit-transform:scale(0.416);
  transform:scale(0.416);
}
.inner {
  position:absolute;
  top:50%; left:50%;
  margin-top:-35.4%;margin-left:-35.4%;
  height:70.8%; width:70.8%;
  background:rgb(27,27,27);
  -webkit-transform:rotate(45deg);
  transform:rotate(45deg);
}
.square > .inner { -webkit-transform:rotate(0deg); }
html,body { width:100%; height:100%; }
@keyframes enlarge {
  50%  { -webkit-transform:scale(0.588) rotate(45deg); transform:scale(0.588) rotate(45deg); }
  100% { -webkit-transform:scale(0.83) rotate(90deg); transform:scale(0.83) rotate(90deg); }
}

Try it Yourself >>

// Because the CSS4 selector :match is not implemented, we have to use javascript to color the even boxes
var inner = document.getElementsByClassName("inner");
for(var i = 0; i < inner.length; i++) { 
  if(i % 2 !== 0) inner[i].style.background = "white"; 
}

// Scale up the elements here so the CSS can scale down them without issue
var square = document.getElementsByClassName('square')[0];
window.onresize = function() {
  var height = parseInt(getComputedStyle(document.getElementsByClassName('container')[0], null).paddingBottom) * 3.4;
  square.style.height = height + "px";
  square.style.width = height + "px";
  square.style.marginLeft = - height/2 + "px";
  square.style.marginTop = - height/2 + "px";
}
window.onresize();

Try it Yourself >>