transform、transition属性的部分应用

今天这篇主要是利用一些属性来实现下面图片中完成的效果。首先整个页面的布局是通过使用4个div然后设置他们的宽高以及浮动等属性。在每一个div里面分别存放两个盒子，分别用来装文字和图片。
效果图：

CSS代码：

.one,.two,.three,.four{
 width: 200px;
 height: 240px;
 float: left;
 margin-left: 150px;
 text-align: center;
 line-height: 30px;
}
.one2,.two2,.three2,.four2{
 margin-top: 10px;
 width: 200px;
 height: 200px;
 border: black 3px solid;
 border-radius:10px;
 overflow: hidden;   //这里是实现第二张图放大时超出盒子的部分不显示，也可以在第二个盒子哪里设置。
}

第一张图

这一张图只要是实现了鼠标悬停时变为圆形的动画效果。主要用到的CSS样式有border-radius和transition属性。通过设置border-radius：50%实现圆形效果。

代码部分：

  <!-- HTML部分 -->
  <div class="one">
   <div>SHAPE</div>
   <div class="one2"></div>
  </div>
  
  <!-- CSS部分 -->
  .one2{
 background-image: url(1.jpg);
 background-size: contain;
}
.one2:hover{
 border-radius: calc(50%);
 transition: all 1s; 
}

第二张图

这里是实现图片的缩放，主要使用到的属性是transform: scale()、transition以及实现不显示一处部分的overflow属性。

代码：

<!-- HTML部分 -->
  <div class="two">
   <div>DISPLACEMENT</div>
   <div class="two2"><img src="4.jpg" width="200px" height="200px"></div>
  </div>
  
//如果上面没有设置，要给img选择器加上overflow属性才可以实现缩放图片，框架不变。
<!-- CSS部分 -->
img:hover{
 transform: scale(1.3);
 transition: all 1s ease 0s;
}

第三张图

这里是实现图片的旋转，主要使用到的属性是transform: rotate()、transition属性。

代码：

<!-- HTML部分 -->
  <div class="three">
   <div>POSITION</div>
   <div class="three2"></div>
  </div>
<!-- CSS部分 -->
.three2{
 background-image: url(3.jpg);
 background-size: contain;
}
.three2:hover{
 transform: rotate(15deg);
 transition: all 2s;
}

第四张图

这里是实现图片变成黑白色，这里主要使用到的属性是filter和transition属性。

代码：

<!-- HTML部分 -->
  <div class="four">
   <div>COLOR</div>
   <div class="four2"></div>
  </div>
  
 <!-- CSS部分 -->
.four2{
 background-image: url(2.jpg);
 background-size: contain;
}
.four2:hover{
 filter: grayscale(100%);
 transition: all 2s;
}