css3 2D變形(transform)移動、縮放、旋轉、傾斜


一. translate(x,y) 或者translateX(x)或者translateY(y)

注意點:translateX(x)translateY(y)大寫XY只寫一個值,默認y=0。

<body>
    <div></div>
</body>
       div{
            width: 200px;
            height: 200px;
            background: rgb(185, 24, 24);
            transition: all 1s;
        }
        div:hover {
            transform: translate(100px,100px);/* 只寫一個值,默認y=0 */
        }

一個作用:使定位的盒子居中對齊,代替原來的方法——嵌套的定位盒子如何居中?

<div class="father">
    <div class="son"></div>
</div>
        .father {
            width: 300px;
            height: 300px;
            border: 1px solid #000;
            position: relative;  
        }
        .son {
            width: 100px;
            height: 100px;
            background: rgb(133, 57, 57);
            position: absolute;
            /* 水平垂直居中 */
            left: 50%;
            top: 50%;
            transform: translate(-50%,-50%);/* transform的位移是居於自身位置的移動,並且會保留位置,類似relative */
        }

二、scale(x,y)或scaleX(x)或scaleY(y)

注意點:scaleX(x)scaleY(y)大寫XY只寫一個值,默認x=y。

 

<body>
    <div></div>
</body>

 

       div{
            width: 200px;
            height: 200px;
            background: rgb(185, 24, 24);
            transition: all 1s;
        }
        div:hover {
            transform: scale(0.6);/* 只寫一個值,x=y=0.6 */
        }

示例:鼠標經過盒子,圖片會動(被放大),效果如下:

<body>
    <div><img src="sina.jpg"></div>
</body>
        div{
            width: 229px;
            height: 143px;/* 盒子和圖片寬高相等 */
            overflow: hidden;/* 等下圖片放大,切掉超過部分 */
        }
        img{
            transition: all 0.3s;/* 添加一個過渡效果 */
        }
        div:hover img{
            transform: scale(1.1);/* 鼠標經過盒子時,里面的圖片(寬高都)放大110% */
        }

三、rotate(angle)或rotateX(angle)或rotateY(angle)

注意:transform-origin 可以設置旋轉點,默認是中心點 ;一定要跟度數deg。

 

<body>
    <div></div>
</body>

 

       div{
            width: 200px;
            height: 200px;
            background: rgb(185, 24, 24);
            transform-origin: bottom right;/* 設置旋轉點,默認是中心點 */
            transition: all 1s;
        }
        div:hover {
            transform: rotate(180deg);/* deg必須要寫 */
        }

示例,旋轉的6張圖片,效果如下:

 

 

<body>
    <ul>
        <li><img src="1.jpg" ></li>
        <li><img src="2.jpg" ></li>
        <li><img src="3.jpg" ></li>
        <li><img src="4..jpg" ></li>
        <li><img src="5.jpg" ></li>
        <li><img src="6.jpg" ></li>
    </ul>
</body>
       ul {
            width: 220px;
            height: 220px;
            position: relative;
        }
        li{
            list-style: none;
            position: absolute;
            left: 0;
            top: 0;
            transform-origin: left top;
            transition: all 1s;
        }
        ul:hover li:first-child{
            transform: rotate(60deg);
        }
        ul:hover li:nth-child(2){
            transform: rotate(120deg);
        }
        ul:hover li:nth-child(3){
            transform: rotate(180deg);
        }
        ul:hover li:nth-child(4){
            transform: rotate(240deg);
        }
        ul:hover li:nth-child(5){
            transform: rotate(300deg);
        }
        ul:hover li:last-child{
            transform: rotate(360deg);
        }    

四、skew(x-angle,y-angle)或者skewX(angle)或者skewY(angle)

 

注意:只寫一個,y=0
<body>
    <div></div>
</body>
      div{
            width: 200px;
            height: 200px;
            background: rgb(185, 24, 24);
            transition: all 1s;
        }
        div:hover {
            transform: skew(20deg,30deg);/* 只寫一個,y=0 */
        }    

總結:1. transform 可以連寫,但是連寫的順序會影響動畫,它是按照一定順序來的;

2. transform 經常與 過渡transition 一起連用,用來展示動畫效果;

3.有2D 也有3D,3D就是利用有XYZ軸,后面的補上。

 

打賞

免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2022 CODEPRJ.COM