一、2D形變

平移

transform:translate(x，y)

相對當前位置，向左移動x像素，像下移動y像素

transform:translateX(num)

相對當前位置，向左移動num像素

transform:translateY(num)

相對當前位置，向下移動num像素

縮放

transform:scale(x，y)

scale()方法，該元素增加或減少的大小，取決于寬度(X軸)和高度(Y軸)的參數

transform:scaleX( num )

改變元素的寬度

transform:scaleY( num )

改變元素的高度

旋轉

transform:rotate( 角度 );

參數是一個角度，表示旋轉多少度

傾斜

transform:skew(角度x，角度y)

沿著x軸旋轉多少度，沿著y軸轉多少度

transform:skewX(角度x)

沿著x軸旋轉多少度

transform:skewY(角度y)

沿著y軸旋轉多少度

二、3D形變

平移

transform:translate3d( x , y , z );

定義三個方向上的平移

transform:translateZ( z );

定義Z方向的平移(單用看不出效果)

縮放

transform: scale3d( x , y , z);

定義3個方向上的縮放，同時可以分別實現(xiàn)3個方向的分別設置

旋轉

rotate3d( x , y , z , angle )

x，表示旋轉軸X坐標方向的矢量。

y，表示旋轉軸Y坐標方向的矢量。

z，表示旋轉軸Z坐標方向的矢量。

angle，表示旋轉角度。正的角度值表示順時針旋轉，負值表示逆時針旋轉。

三、過渡

transition屬性

通過transition，我們可以在不使用flash的情況下，讓元素從一種樣式變化成另一種樣式

body{

position: relative;

}

#box{

height: 100px;

width: 100px;

background-color: skyblue;

transition: margin-left 3s;

}

// var box = document.querySelector("box");

box.onclick = function(){

this.style.marginLeft = "600px";

}

運行效果

GIF.gif

transition實現(xiàn)多個過渡

body{

position: relative;

}

#box{

/*如果動畫的元素是margin，不能設置auto*/

height: 100px;

width: 100px;

background-color: pink;

position: absolute;

top: 20px;

transition: margin-left 3s,background-color 3s,border-radius 3s,top 3s;

}

//var box = document.querySelector("box");

box.onclick = function(){

this.style.marginLeft = "600px";

this.style.backgroundColor = "red";

this.style.borderRadius = "50px";

this.style.top = "100px";

}

運行效果

GIF.gif

利用偽元素實現(xiàn)transition過度

body{

position: relative;

}

#box{

/*如果動畫的元素是margin，不能設置auto*/

height: 100px;

width: 100px;

background-color: pink;

position: absolute;

top: 20px;

transition: margin-left 3s,background-color 3s,border-radius 3s,top 3s;

}

#box:hover{

background-color: purple;

border-radius: 50px;

top: 50px;

}

運行結果

GIF.gif

利用transition實現(xiàn)3D動畫過度

body{

position: relative;

}

#box{

/*如果動畫的元素是margin，不能設置auto*/

height: 300px;

width: 300px;

margin: 15px 0 0 15px;

position: relative;

background: url(img/bg.jpg) round;

/*將來寫有關動畫相關的代碼，要寫兼容*/

/*transform-style: preserve-3d;*/

/*設置鏡頭距離*/

perspective: 20000px;

}

div img{

width: 130px;

height: 200px;

position: absolute;

top: 50px;

left: 85px;

transform-style: preserve-3d;

transform: rotateZ(180deg) rotateX(0) rotateY(0deg);

transition: all 3s;

}

div img:hover{

transform: rotateZ(0) rotateX(360deg) rotateY(180deg);

}


運行結果

GIF.gif

css3動畫

如果用@keyframes 創(chuàng)建動畫，把它綁定到一個選擇器，否則動畫不會有任何效果。

指定至少這兩個CSS3的動畫屬性綁定向一個選擇器：

規(guī)定動畫的名稱

規(guī)定動畫的時長

from-to

#box{

height: 30px;

width: 30px;

background-color: blue;

animation: rect 3s linear 0.5s alternate 3 ;

}

@keyframes rect{

from{

transform: translate(0,0);

background-color: blue;

}

to{

transform: translate(200px,200px);

background-color: red;

}

}

運行效果

GIF.gif

百分比

#box{

height: 50px;

width: 50px;

background-color: blue;

animation: rect 3s linear infinite alternate;

}

@keyframes rect{

0%{

transform: translate(0,0);

background-color: blue;

}

25%{

transform: translate(300px,0px);

background-color: red;

border-radius: 50%;

}

50%{

transform: translate(300px,300px);

background-color: pink;

border-radius: 0;

}

75%{

transform: translate(0px,300px);

background-color: orange;

border-radius: 50%;

}

100%{

transform: translate(0px,0px);

background-color: yellow;

}

}

運行效果

GIF.gif

小案例(動畫實現(xiàn)一個簡易大風車)

.circle{

height: 200px;

width: 200px;

margin: 50px auto;

background-color: pink;

border-radius: 50%;

position: relative;

animation: rect 2s linear infinite;

}

.f1{

height: 80px;

width: 50px;

background-color: blue;

position: absolute;

left: 100px;

top: 20px;

border-top-right-radius: 100%;

}

.f2{

width: 80px;

height: 50px;

background-color: red;

position: absolute;

left: 100px;

top: 100px;

border-bottom-right-radius: 100%;

}

.f3{

height: 80px;

width: 50px;

background-color: orange;

position: absolute;

left: 50px;

top: 100px;

border-bottom-left-radius: 100%;

}

.f4{

height: 50px;

width: 80px;

background-color: green;

position: absolute;

left: 20px;

top: 50px;

border-top-left-radius: 100%;

}

@keyframes rect{

from{

transform: rotate(0);

}

to{

transform: rotate(360deg);

}

}

運行結果

GIF.gif

喜歡就點贊

總結

以上是生活随笔為你收集整理的css动画改变高度有过渡效果,css3-形变、过渡、动画的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。