编程 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区域模块region相关编写示例

Aug 28 HTML / CSS

CSS3实现瀑布流布局与无限加载图片相册的实例代码

Dec 22 HTML / CSS

CSS3 实现的火焰动画

Dec 07 HTML / CSS

详解HTML5 LocalStorage 本地存储

Dec 23 HTML / CSS

详解使用HTML5的classList属性操作CSS类

Oct 13 HTML / CSS

html5-Canvas可以在web中绘制各种图形

Dec 26 HTML / CSS

HTML5里的placeholder属性使用实例和美化显示效果的方法

Apr 23 HTML / CSS

HTML5 Canvas 旋转风车绘制

Aug 18 HTML / CSS

HTML5实现视频弹幕功能

Aug 09 HTML / CSS

解决HTML5中的audio在手机端和微信端的不能自动播放问题

Nov 04 HTML / CSS

Css预编语言及区别详解

Apr 25 HTML / CSS

详解CSS不受控制的position fixed

May 25 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

You might like

基于flush()不能按顺序输出时的解决办法

2013/06/29 PHP

php创建session的方法实例详解

2015/01/27 PHP

php判断用户是否关注微信公众号

2016/07/22 PHP

laravel框架中路由设置，路由参数和路由命名实例分析

2019/11/23 PHP

iframe 自适应高度[在IE6 IE7 FF下测试通过]

2009/04/13 Javascript

JS简单的图片放大缩小的两种方法

2013/11/11 Javascript

Bootstrap3制作图片轮播效果

2016/05/12 Javascript

AngularJS中的指令全面解析(必看)

2016/05/20 Javascript

JavaScript实现简单的拖动效果

2016/07/02 Javascript

微信小程序 form组件详解

2016/10/25 Javascript

用AngularJS来实现监察表单按钮的禁用效果

2016/11/02 Javascript

微信小程序左右滑动切换页面详解及实例代码

2017/02/28 Javascript

jQuery插件echarts去掉垂直网格线用法示例

2017/03/03 Javascript

微信小程序中显示html格式内容的方法

2017/04/25 Javascript

Angular4项目中添加i18n国际化插件ngx-translate的步骤详解

2017/07/02 Javascript

详谈表单重复提交的三种情况及解决方法

2017/08/16 Javascript

原生js实现拖拽功能基本思路详解

2018/04/18 Javascript

使用 Vue 实现一个虚拟列表的方法

2019/08/20 Javascript

详解elementUI中input框无法输入的问题

2020/04/27 Javascript

Linux下使用python调用top命令获得CPU利用率

2015/03/10 Python

10款最好的Web开发的 Python 框架

2015/03/18 Python

Python获取当前路径实现代码

2017/05/08 Python

windows下安装python的C扩展编译环境(解决Unable to find vcvarsall.bat)

2018/02/21 Python

Python迭代器与生成器用法实例分析

2018/07/09 Python

Mac下Anaconda的安装和使用教程

2018/11/29 Python

Python构建图像分类识别器的方法

2019/01/12 Python

centos7中安装python3.6.4的教程

2019/12/11 Python

使用PyTorch将文件夹下的图片分为训练集和验证集实例

2020/01/08 Python

python向企业微信发送文字和图片消息的示例

2020/09/28 Python

filter使用python3代码进行迭代元素的实例详解

2020/12/03 Python

详解通过focusout事件解决IOS键盘收起时界面不归位的问题

2019/07/18 HTML / CSS

团日活动策划书

2014/02/01 职场文书

认错检讨书

2014/10/02 职场文书

2015国际残疾人日活动总结

2015/03/24 职场文书

导游词之重庆渣滓洞

2020/01/08 职场文书

MySQL中的引号和反引号的区别与用法详解

2021/10/24 MySQL