一. translate(x,y) 或者translateX(x)或者translateY(y)
注意點:translateX(x)和translateY(y)大寫X和Y;只寫一個值,默認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)大寫X和Y;只寫一個值,默認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軸,后面的補上。