编程 HTML / CSS

CSS3转换功能transform主要属性值分析及实现分享

Posted in HTML / CSS onMay 06, 2012

今天我想介绍一下转换的用法：
transform主要包括以下属性值：
rotate(旋转度数)
scale(缩放)
skew(斜切扭曲)
translate(对象平移)
利用上述属性值，可以实现一些很酷的效果，比如正方体，下面是我做的一个效果，三个大小不等的正方体
CSS3转换功能transform主要属性值分析及实现分享
代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>CSS3转换功能(3water.com)</title> <script type="text/javascript" src="http://demo.3water.com/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: absolute; 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; border-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; -moz-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>

提示：您可以先修改部分代码再运行

CSS3转换功能transform主要属性值分析及实现分享

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

HTML / CSS 相关文章推荐

css3个性化字体_动力节点Java学院整理

Jul 12 HTML / CSS

推荐10个CSS3 制作的创意下拉菜单效果

Feb 11 HTML / CSS

CSS3实现多样的边框效果

May 04 HTML / CSS

基于HTML5超酷摄像头（HTML5 webcam）拍照功能实现代码

Dec 13 HTML / CSS

html5基础标签(html5视频标签 html5新标签用法)

Dec 30 HTML / CSS

使用纯HTML5编写一款网页上的时钟的代码分享

Nov 16 HTML / CSS

html5+css3进度条倒计时动画特效代码【推荐】

Mar 08 HTML / CSS

html5 视频播放解决方案

Nov 06 HTML / CSS

使用phonegap获取设备的一些信息方法

Mar 31 HTML / CSS

详解HTML5将footer置于页面最底部的方法(CSS+JS)

Oct 11 HTML / CSS

记一次高分屏下canvas模糊问题

Feb 17 HTML / CSS

使用CSS自定义属性实现骨架屏效果

Jun 21 HTML / CSS

分享CSS3中必须要知道的10个顶级命令

Apr 26 #HTML / CSS

CSS3结构性伪类选择器九种写法

Apr 18 #HTML / CSS

巧用CSS3 border实现图片遮罩效果代码

Apr 09 #HTML / CSS

时尚的CSS3进度条效果

Feb 22 #HTML / CSS

CSS3 选择器伪类选择器介绍

Jan 21 #HTML / CSS

CSS3 选择器属性选择器介绍

Jan 21 #HTML / CSS

CSS3 选择器基本选择器介绍

Jan 21 #HTML / CSS