CSS3 實現DIV放大和縮小
阿新 • • 發佈:2019-01-05
.zoom { transform: scale(1,1); -ms-transform: scale(1,1); /* IE 9 */ -webkit-transform: scale(0.8,0.8); /* Safari and Chrome */ } <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> div:first-of-type{ width: 200px; height: 200px; background: #006400; /*使 div 元素看上去像一個按鈕:*/ appearance: button; /*background-attachemnt: 背景定位*/ /*取值: scroll | fixed | inherit scroll: 隨著頁面的滾動軸背景圖片將移動 fixed: 隨著頁面的滾動軸背景圖片不會移動 inherit: 繼承*/ background-attachment: scroll; border: 10px black dashed; /*背景填充方法*/ background-clip: padding-box; /*陰影方法*/ /*內陰影 inset*/ box-shadow: 10px 10px 10px black inset; text-shadow: 10px 10px 10px red; /*偏移方法*/ /*旋轉方法*/ transform: rotate(30deg); /*移動位置 左右 上下*/ transform: translate(100px,100px); /*規模效果*/ transform: scale(2); /*變形效果*/ transform:skew(20deg); /*變化持續時間*/ transition: 5s; } div{ width: 200px; height: 200px; background: linear-gradient(#f4f4f4,#000000); transition: 5s; /*行類塊標籤*/ display: inline-block; } div:hover{ transform: rotateX(45deg) translate(100px,100px) scale(2) skew(45deg); } </style> </head> <body> <div>道可道,非常道</div> <div>道可道,非常道</div> <div>道可道,非常道</div> </body> </html>