.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>CSS3 實現DIV放大和縮小
免責聲明！
本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。