CSS3 transform:rotate(deg) 2D旋转效果

来源：互联网发布：avmoo最新域名2016 3 编辑：程序博客网时间：2024/06/08 13:14

<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><!-- Always force latest IE rendering engine (even in intranet) & Chrome FrameRemove this if you use the .htaccess --><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><title>index</title><meta name="description" content=""><meta name="author" content="boonya"><meta name="viewport" content="width=device-width; initial-scale=1.0"><!-- Replace favicon.ico & apple-touch-icon.png in the root of your domain and delete these references --><link rel="shortcut icon" href="/favicon.ico"><link rel="apple-touch-icon" href="/apple-touch-icon.png"><style>body{background:url(img/a.jpg);background-size: 600px 800px;background-repeat: no-repeat;padding-top: 100px;color: #B21CAA;font-family: '楷体';size: 12px;text-shadow:10px 10px 5px #211A1A;/*文字阴影*/}div{transform:rotate(-30deg);/*div旋转，度数可正负*/width:200px;height: 100px;}</style></head><body><div><p>这是小妞！</p><br /><p>这是小妞！</p><br /><p>这是小妞！</p><br /><p>这是小妞！</p><br /><p>这是小妞！</p><br /></div></body></html>

运行效果：

参考地址：http://www.w3school.com.cn/css3/css3_2dtransform.asp

1 0