css3元素变化讲解
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> *{ padding: 0; margin: 0; } #jhreh{ width: 60px; height: 600px; border: 2px solid black; margin: 10px auto; /*transform变换 rotate旋转 30deg 角度*/ /*transform: rotate(30deg);*/ /*translate 平移 让元素相对于现在的位置进行平移 向右移100，向下移50,*/ /*transform: translate(100px,50px);*/ /*整体缩放效果 scale 比例 宽度原来的1.8倍，高度0.6倍*/ /*transform: scale(1.8,0.6);*/ /*扭曲效果 skew 斜的*/ transform: skew(30deg,0); } #jhreh div:nth-child(1){ width: 60px; height: 100px; background: yellow; } #jhreh div:nth-child(2){ width: 60px; height: 370px; background: red; color: yellow; font-size: 30px; font-family: "微软雅黑"; text-align: center; padding-top:30px; } #jhreh div:nth-child(3){ width: 60px; height: 100px; background: yellow; } </style> </head> <body> <div id="jhreh"> <div></div> <div>如意金箍棒</div> <div></div> </div> </body> </html> 
本站声明:网站内容来源于网络,如有侵权,请联系我们https://www.qiquanji.com,我们将及时处理。
微信扫码关注
更新实时通知