老司机Studio 第三章

CSS3的进阶特性

• verticle-align

  • 垂直对齐方式
  • 只对容器内的inline-block元素起作用：图片，按钮，单复选框，单行/多行文本框等HTML控件
  • top, text-top, middle, bottom, text-bottom, baseline
    http://www.zhangxinxu.com/study/201005/verticle-align-test-demo.html

• flex

<div class="flex-container">
  <div class="flex-item"><div class="flex-item-inner">1</div></div>
  <div class="flex-item"><div class="flex-item-inner">2</div></div>
  <div class="flex-item"><div class="flex-item-inner">3</div></div>
  <div class="flex-item"><div class="flex-item-inner">4</div></div>
</div>

<style type="text/css">
    .flex-container{
        width: 160px;
        height: 100px;
        background: #FFD54F;
        display: flex;
/*      flex-direction: row;
        flex-wrap: wrap;*/
    }
    .flex-item{
        background: white;
        width: 40px;
        height: 40px;
        text-align: center;
        vertical-align: middle;
        margin: 4px;
        text-align: center;
    }
    .flex-item-inner{
        left: 5px;
        top: 5px;
        position: relative;
        width: 30px;
        height: 30px;
        line-height: 30px;
        font-size: 20px;
        border-radius: 50%;
        color: white;
        background: orange;
    }

</style>

flex布局

- ie9开始支持
- display:flex;
- justify-content: 主轴对齐方式
- align-items: 副轴对齐方式
- order: 顺序
- wrap: 是否换行 默认不换
- flex-basis: 在还有剩余空间时的
- flex-grow:
- flex-shrink:

主轴对齐 副轴对齐

• transform

<div>Hello</div>

<style type="text/css">
div
{
    position: relative;
    top: 20px;
    left: 20px;
    width:200px;
    height:100px;
    background-color:yellow;
    /* 旋转 */
    transform:rotate(7deg);
}
</style>

旋转 平移 缩放 skewX skewY

• transform-origin

  • transform-origin:(left,top):

    
    transform-origin

  • transform-origin:(right):

    
    transform-origin

  • transform-origin:(25%,75%):

    
    image.png

<div class="menu"> 
  <ul class="clearfix"> 
    <li class="item translate"><a href="#">Translate</a></li> 
    <li class="item translate-x"><a href="#">TranslateX</a></li> 
    <li class="item translate-y"><a href="#">TranslateY</a></li> 
    <li class="item rotate"><a href="#">Rotate</a></li> 
    <li class="item scale"><a href="#">Scale</a></li> 
    <li class="item scale-x"><a href="#">ScaleX</a></li> 
    <li class="item scale-y"><a href="#">ScaleY</a></li> 
    <li class="item skew"><a href="#">Skew</a></li> 
    <li class="item skew-x"><a href="#">SkewX</a></li> 
    <li class="item skew-y"><a href="#">SkewY</a></li> 
    <li class="item matrix"><a href="#">Matrix</a></li> 
  </ul> 
</div>
<style>
li{
    width: 70px;
    display: inline;
}
  .menu ul { border-top: 15px solid black; padding: 0 10px; } 
  .menu ul li a{ color: #fff; float: left; margin: 0 5px; font-size: 14px; height: 50px; line-height: 50px; text-align: center; width: 65px; padding: 10px 5px; background: #151515; border-radius: 0 0 5px 5px; box-shadow: 0 0 1px #ccc,inset 0 0 2px #fff; text-shadow: 0 1px 1px #686868; text-decoration: none; } 
.menu ul li.translate a{ background: #2EC7D2; } 
.menu ul li.translate-x a { background: #8FDD21; } 
.menu ul li.translate-y a { background: #F45917; } 
.menu ul li.rotate a { background: #D50E19; } 
.menu ul li.scale a { background: #cdddf2; } 
.menu ul li.scale-x a { background: #0fDD21; } 
.menu ul li.scale-y a { background: #cd5917; } 
.menu ul li.skew a { background: #519; } 
.menu ul li.skew-x a { background: #D50; } 
.menu ul li.skew-y a { background: #E19; } 
.menu ul li.matrix a { background: #919; } 
</style>

3d

<div class="outer"><div class="inner">Hello</div></div>

<style type="text/css">
.outer{
    border: 1px solid #ccc;
    position: relative;
    top: 100px;
    left: 100px;
    width: 100px;
    height:100px;
    perspective: 201px;
}
.inner
{
    width: 100px;
    height:100px;
    color: white;
    background-color: forestgreen;
    transform: rotateY(30deg);
}
</style>

• transition动画

  
  transition

<div class="outer"><div class="inner">Hello</div></div>

<style type="text/css">
.outer{
    border: 1px solid #ccc;
    position: relative;
    top: 100px;
    left: 100px;
    width: 100px;
    height:100px;
    perspective: 201px;
}
.inner
{
    width: 100px;
    height:100px;
    color: white;
    background-color: forestgreen;
    transition: all 1s linear 0s;
}

.inner:hover{
    transform: scale(3);
}

</style>

• animation动画

  
  animation

<div class="outer"><div class="inner">Hello</div></div>

<style type="text/css">
.outer{
    border: 1px solid #ccc;
    position: relative;
    top: 100px;
    left: 100px;
    width: 100px;
    height:100px;
    perspective: 201px;
    transform-style:  flat;
}
.inner
{
    width: 100px;
    height:100px;
    color: white;
    background-color: forestgreen;
    animation: rotation 20s ease-in-out 2s infinite normal;
}

@keyframes rotation{
    from{
       transform: rotateY(0deg);
     }
     to{
        transform: rotateY(360deg);
     }
}

</style>