今天我想介绍一下转换的用法：
transform主要包括以下属性值：
rotate(旋转度数)
scale(缩放)
skew(斜切扭曲)
translate(对象平移)
利用上述属性值，可以实现一些很酷的效果，比如正方体，下面是我做的一个效果，三个大小不等的正方体
代码如下：
广播节目策划<!doctype html public “-//w3c//dtd xhtml 1.0 transitional//en” “/d/file/titlepic/xhtml1-transitional.dtd& <html xmlns=”http://www.w3.org/1999/xhtml”> <head> <meta http-equiv=”content-type” cont9 14情人节ent=”text/html; chart=utf-8″ /> <title>css3转换功能(www.jb51.net)</title> <script type=”text/javascript” src=”http://demo.jb51.net/jslib/jquery/jquery-1.7.min.js”></script> <style type=”text/css”> * { margin: 0; padding: 0; list-style: none; } body { padding-top: 100px; } .box { margin: 0 auto 0; width: 300px; height: 500px; position: relative; } .box .topbox { position: absolute; width: 300px; height: 150px; border: 1px solid #ccc; top: 0; left:107px; background-color: yellow; -moz-transform: skew(-55deg,0); -webkit-transform: skew(-55deg,0); -o-transform: skew(-55deg,0); font-size: 100px; text-align: center; } .box .topbox02{ position: ab真挚的近义词和反义词solute; width: 300px; height: 260px; border: 1px solid #ccc; border-top: none; top: 152px; left: 0; background-color: green; } .box .topbox03{ position: absolute; width: 214px; height: 260px; border: 1px solid #ccc; b阙怎么读音order-top: none; border-left: none; top: 76px; left: 302px; background-color: blue; -moz-transform: skew(0,-35deg); -webkit-transform: skew(0,-35deg); -o-transform: skew(0,-35deg); } .box .topbox04 { position: absolute; width: 300px; height: 150px; border: 1px solid #ccc; top: 260px; left:107px; -mo科学发展观的基本要求是什么z-transform: skew(-55deg,0); -webkit-transform: skew(-55deg,0); -o-transform: skew(-55deg,0); } .box02 { -moz-transform: scale(0.5,0.5) translate(455px,-838px); -webkit-transform: scale(0.5,0.5) translate(455px,-838px); -o-transform: scale(0.5,0.5) translate(455px,-838px); } .box03 { -moz-transform: scale(0.2,0.2) translate(1671px, -4354px); -webkit-transform: scale(0.2,0.2) translate(1671px, -4354px); -o-transform: scale(0.2,0.2) translate(1671px, -4354px); } .box .topbox05 { position: absolute; width: 300px; height: 260px; border-left: 1px solid #ccc; top: 0; left:214px; } </style> </head> <body> <div class=”box”> <div class=”topbox”></div> <div class=”topbox02″></div> <div class=”topbox03″></div> <div class=”topbox04″></div> <div class=”topbox05″></div> </div> <div class=”box box02″> <div class=”topbox”></div> <div class=”topbox02″></div> <div class=”topbox03″></div> <div class=”topbox04″></div> <div class=”topbox05″></div> </div> <div class=”box box03″> <div class=”topbox”></div> <div class=”topbox02″></div> <div class=”topbox03″></div> <div class=”topbox04″></div> <div class=”topbox05″></div> </div> </body> </html>
提示：您可以先修改部分代码再运行
本文发布于:2023-04-03 16:34:10，感谢您对本站的认可！
本文链接：https://www.wtabcd.cn/fanwen/zuowen/5f8195dedd9fc5b69781a72c66d701da.html
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系，我们将在24小时内删除。
本文word下载地址：CSS3转换功能transform主要属性值分析及实现分享.doc
本文 PDF 下载地址：CSS3转换功能transform主要属性值分析及实现分享.pdf
| 留言与评论（共有 0 条评论） |
