transform应用

来源：互联网发布：房屋中介软件哪个好编辑：程序博客网时间：2024/05/18 14:43

1.transform导航

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>transform导航</title><style>ul{margin:0;padding:0;list-style:none;}li{float:left;width:100px;text-align: center;height:30px;border:solid 1px #fff;background:red;font:12px/30px "宋体";-Webkit-transform:skewX(-30deg);}a{text-decoration: none;-Webkit-transform:skewX(30deg);display:block;}</style></head><body><ul><li><a href="#">个人首页</a></li><li><a href="#">交流社区</a></li></ul></body></html>

网页显示截图：

2.tranform小问题

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>transform小问题</title><style>body{height:400px;border:solid 1px #000;}.box{height:100px;width:100px;background:red;margin: 10px;transition:2s;font:50px/100px "宋体";color:#fff;text-align:center;}body:hover .box:nth-of-type(1){-Webkit-transform:translate(100px) scale(0.5);/*缩放先于位移执行*/}body:hover .box:nth-of-type(2){-Webkit-transform:scale(0.5) translate(100px) ;/*位移先于缩放执行*/}</style></head><body><div class="box">哈</div><div class="box">嘿</div></body></html>

网页显示截图：

执行前：

执行后：

0 0