<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <style> div{ width: 200px; height: 100px; background: pink; border: 1px solid #ccc; margin-bottom: 10px; } .box1{ transform: translate(20px, 15px); -webkit-transform: translate(20px, 15px); -moz-transform: translate(20px, 15px); -ms-transform: translate(20px, 15px); -o-transform: translate(20px, 15px); } .box2{ transform: translate3d(5px, 10px, 500px); -webkit-transform: translate3d(5px, 10px, 500px); -moz-transform: translate3d(5px, 10px, 500px); -ms-transform: translate3d(5px, 10px, 500px); -o-transform: translate3d(5px, 10px, 500px); } .box3{ transform: translateX(30px); -webkit-transform: translateX(30px); -moz-transform: translateX(30px); -ms-transform: translateX(30px); -o-transform: translateX(30px); } .box4{ transform: scale(2.0, 2.0); -webkit-transform: scale(2.0, 2.0); -moz-transform: scale(2.0, 2.0); -ms-transform: scale(2.0, 2.0); -o-transform: scale(2.0, 2.0); } .box5{ transform: scale3d(1, 1, 2.0); -webkit-transform: scale3d(1, 1, 2.0); -moz-transform: scale3d(1, 1, 2.0); -ms-transform: scale3d(1, 1, 2.0); -o-transform: scale3d(1,1, 2.0); } .box6{ transform: scaleZ(2); -webkit-transform: scaleZ(2); -moz-transform: scaleZ(2); -ms-transform: scaleZ(2); -o-transform: scaleZ(2); } .box7{ transform: rotate(30deg); -webkit-transform: rotate(30deg); -moz-transform: rotate(30deg); -ms-transform: rotate(30deg); -o-transform: rotate(30deg); } .box8{ transform: rotate3d(1, 1, -1, 30deg); -webkit-transform: rotate3d(1, 1, -1, 30deg); -moz-transform: rotate3d(1, 1, -1, 30deg); -ms-transform: rotate3d(1, 1, -1, 30deg); -o-transform: rotate3d(1, 1, -1, 30deg); } .box9{ transform: rotateX(80deg); -webkit-transform: rotateX(80deg); -moz-transform: rotateX(80deg); -ms-transform: rotateX(80deg); -o-transform: rotateX(80deg); } .box10{ transform: skew(30deg, 30deg); -webkit-transform: skew(30deg, 30deg); -moz-transform: skew(30deg, 30deg); -ms-transform: skew(30deg, 30deg); -o-transform: skew(30deg, 30deg); } .box11{ transform: skewX(45deg); -webkit-transform: skewX(45deg); -moz-transform: skewX(45deg); -ms-transform: skewX(45deg); -o-transform: skewX(45deg); } .box12{ position: relative; padding: 20px; perspective: 150; -webkit-perspective: 150; } .box12>div{ width: 160px; height: 60px; border: 1px solid #ddd; background: #09f; transform: rotateX(45deg); -webkit-transform: rotateX(45deg); -moz-transform: rotateX(45deg); -ms-transform: rotateX(45deg); -o-transform: rotateX(45deg); } .box13{ background: #09f; width: 200px; transition: width 2s,background 2s; -webkit-transition: width 2s,background 2s; -moz-transition: width 2s,background 2s; -ms-transition: width 2s,background 2s; -o-transition: width 2s,background 2s; } .box13:hover{ width: 400px; background: blue; } .box14{ position: relative; animation: move 5s linear infinite alternate;; -webkit-animation: move 5s linear infinite alternate;; -moz-animation: move 5s linear infinite alternate;; -ms-animation: move 5s linear infinite alternate;; -o-animation: move 5s linear infinite alternate; } /* animation-play-state: paused|running;設置對象動畫的狀態，下例hover運動暫停 */ .box14:hover{ animation-play-state: paused; -webkit-animation-play-state: paused; -moz-animation-play-state: paused; } @keyframes move { from{left: 0px;} to{left: 500px;} } @-webkit-keyframes move{ 0%{left: 0px;} 100%{left: 500px;} } .box15 span{ display: block; font-weight: bolder; font-size: 20px; } .a1{ transform: translate(60px); -webkit-transform: translate(60px); -moz-transform: translate(60px); animation: move1 2s ease-out forwards; -webkit-animation: move1 2s ease-out forwards; -moz-animation: move1 2s ease-out forwards; } @keyframes move1{ 0%{transform: translate(0px);opacity: 0;} 40%{transform: translate(20px);opacity: 0.4;} 70%{transform: translate(40px);opacity: 1.0;} 100%{transform: translate(60px);opacity: 0;} } @-webkit-keyframes move1{ 0%{-webkit-transform: translate(0px);opacity: 0;} 40%{-webkit-transform: translate(20px);opacity: 0.4;} 70%{-webkit-transform: translate(40px);opacity: 1.0;} 100%{-webkit-transform: translate(60px);opacity: 0;} } @-moz-keyframes move1{ 0%{-moz-transform: translate(0px);opacity: 0;} 40%{-moz-transform: translate(20px);opacity: 0.4;} 70%{-moz-transform: translate(40px);opacity: 1.0;} 100%{-moz-transform: translate(60px);opacity: 0;} } .a3{ opacity: 0; transform: translate(20px); -webkit-transform: translate(20px); -moz-transform: translate(20px); animation: move3 2s ease-in 2s forwards; -webkit-animation: move3 2s ease-in 2s forwards; -moz-animation: move3 2s ease-in 2s forwards; } @keyframes move3{ 0%{transform: translate(120px);opacity: 0;} 40%{transform: translate(80px);opacity: 0.4;} 70%{transform: translate(40px);opacity: 1.0;} 100%{transform: translate(20px);opacity: 0;} } @-webkit-keyframes move3{ 0%{-webkit-transform: translate(120px);opacity: 0;} 40%{-webkit-transform: translate(80px);opacity: 0.4;} 70%{-webkit-transform: translate(40px);opacity: 1.0;} 100%{-webkit-transform: translate(20px);opacity: 0;} } @-moz-keyframes move3{ 0%{-moz-transform: translate(120px);opacity: 0;} 40%{-moz-transform: translate(80px);opacity: 0.4;} 70%{-moz-transform: translate(40px);opacity: 1.0;} 100%{-moz-transform: translate(20px);opacity: 0;} } .a2{ opacity: 0; font-size: 36px; text-align: center; animation: move2 2s ease-in 4s forwards; -webkit-animation: move2 2s ease-in 4s forwards; -moz-animation: move2 2s ease-in 4s forwards; } @keyframes move2{ 0%{opacity: 0;} 20%{opacity: 0.6;} 40%{opacity: 0.8;} 60%{opacity: 0.4;} 80%{opacity: 0.8;} 100%{opacity: 1.0;} } @-webkit-keyframes move2{ 0%{opacity: 0;} 20%{opacity: 0.6;} 40%{opacity: 0.8;} 60%{opacity: 0.4;} 80%{opacity: 0.8;} 100%{opacity: 1.0;} } @-moz-keyframes move2{ 0%{opacity: 0;} 20%{opacity: 0.6;} 40%{opacity: 0.8;} 60%{opacity: 0.4;} 80%{opacity: 0.8;} 100%{opacity: 1.0;} } </style> </head> <body> <!-- transform屬性向元素應用2D或3D轉換，我們可以旋轉、縮放、移動、傾斜元素，語法：transform: none|transform-functions; --> <!-- translate(x,y)--定義2D位移 --> <div class="box1">translate(x,y)</div> <!-- translate(x,y,z)--定義3D位移 --> <div class="box2">translate(x,y,z)</div> <!-- translateX(x)--定義只按X軸位移 (同理按Y軸，3D的Z軸)--> <div class="box3">translateX(x)</div> <!-- scale(x,y)--定義2D縮放轉換 --> <div class="box4">scale(x,y)</div> <!-- scale3d(x,y,z)--定義3D縮放轉換 --> <div class="box5">scale3d(x,y,z)</div> <!-- scaleZ(z)--定義只按Z軸縮放（同理按Y軸，X軸） --> <div class="box6">scaleZ(z)</div> <!-- rotate(angle)--定義2D旋轉 --> <div class="box7">rotate(angle)</div> <!-- rotate3d(angle)--定義3D旋轉 x,y,z的值組成在3d空間的矢量坐標，對象將會圍繞這個坐標軸旋轉--> <div class="box8">rotate3d(x,y,z,angle)</div> <!-- rotateX(angle) 定義沿X軸的3d旋轉(同理設置Y軸Z軸的3d旋轉)--> <div class="box9">rotateX(angle)</div> <!-- skew(x-angle,y-angle) 定義沿X軸和Y軸的傾斜轉換--> <div class="box10">skew(x-angle,y-angle)</div> <!-- skewX(xangle) 定義沿X軸的2d傾斜轉換(同理設置Y軸的2d傾斜轉換)--> <div class="box11">skewX(angle)</div> <!-- perspective(n)為3D轉換元素定義透視視圖(當為元素定義 perspective 屬性時，其子元素會獲得透視效果，而不是元素本身) --> <div class="box12"> <div>perspective(n)</div> </div> <!-- transition屬性對元素設置對象變換時的過渡,用於設置4個過渡屬性： transition-property--參與過渡的屬性、 transition-duration--對象過渡的持續時間、 transition-timing-function--對象中過渡的動畫類型、 transition-delay--對象延遲過渡的時間 --> <!-- 如果只提供一個<time>參數，則為 <' transition-duration '> 的值定義；如果提供二個<time>參數，則第一個為 <' transition-duration '> 的值定義，第二個為 <' transition-delay '> 的值定義 --> <div class="box13">transition過渡效果</div> <!-- animation 設置對象元素的動畫特效，用於設置6個動畫屬性（默認值none 0 ease 0 1 normal）： animation-name--需要綁定到選擇器上的動畫名稱、 animation-duration--完成動畫所花費的時間、 animation-timing-function--規定動畫的速度曲線、 animation-delay--規定在動畫開始前的延遲、 animation-iteration-count--規定動畫播放的次數、 animation-direction--規定動畫是否輪流反向播放 ( forwards--當動畫完成后，保持最后一個屬性值 )--> <div class="box14">animation動畫特效</div> <div class="box15"> <span class="a1">css3 animation</span> <span class="a2">css3 animation</span> <span class="a3">css3 animation</span> </div> </body> </html>
自己總結的CSS3中transform變換、transition過渡、animation動畫的基本用法
免責聲明！
本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。
猜您在找
CSS3 transition動畫、transform變換、animation動畫
CSS3的變形transform、過渡transition、動畫animation學習
【CSS3】transition過渡和animation動畫
CSS3動畫transform、transition和animation的區別
css3中的變形（transform）、過渡(transtion)、動畫(animation)
css3中的屬性 變形(transform)、過渡(transtion)、動畫(animation)
CSS3中動畫屬性transform、transition和animation
css3中的變形（transform）、過渡(transtion)、動畫(animation)
css 的過渡（transition） 和動畫（animation）
css動畫(transition/transform/animation)