编程 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 旋转按钮使用CSS3创建一个旋转可变色按钮

Dec 31 HTML / CSS

CSS3 透明色 RGBA使用介绍

Aug 06 HTML / CSS

纯css3显示隐藏一个div特效的具体实现

Feb 10 HTML / CSS

如何让IE9以下版本(ie6/7/8)认识html5元素

Apr 01 HTML / CSS

谈一谈HTML5本地存储技术

Mar 02 HTML / CSS

HTML5 LocalStorage 本地存储刷新值还在

Mar 10 HTML / CSS

HTML5实现签到功能

Oct 09 HTML / CSS

详解canvas绘制多张图的排列顺序问题

Jan 21 HTML / CSS

可能这些是你想要的H5软键盘兼容方案(小结)

Apr 23 HTML / CSS

Canvas图片分割效果的实现

Jul 29 HTML / CSS

html5移动端自适应布局的实现

Apr 15 HTML / CSS

详解移动端h5页面根据屏幕适配的四种方案

Apr 15 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

php中随机显示图片的函数代码

2011/06/23 PHP

PHP 数组和字符串互相转换实现方法

2013/03/26 PHP

phpstrom使用xdebug配置方法

2013/12/17 PHP

PHP return语句的另一个作用

2014/07/30 PHP

php常用hash加密函数

2014/11/22 PHP

Fleaphp常见函数功能与用法示例

2016/11/15 PHP

FLASH 广告之外的链接

2008/12/16 Javascript

Javascript/Jquery——简单定时器的多种实现方法

2013/07/03 Javascript

js中onload与onunload的使用示例

2013/08/25 Javascript

基于jquery的网站幻灯片切换效果焦点图代码

2013/09/15 Javascript

jQuery采用连缀写法实现的折叠菜单效果

2015/09/18 Javascript

NodeJs实现定时任务的示例代码

2017/12/05 NodeJs

Angular4集成ng2-file-upload的上传组件

2018/03/14 Javascript

浅谈如何使用webpack构建多页面应用

2018/05/30 Javascript

对Vue.js之事件的绑定(v-on: 或者 @ )详解

2018/09/15 Javascript

ionic3双击返回退出应用的方法

2019/09/17 Javascript

[37:21]完美世界DOTA2联赛PWL S2 Inki vs Magma 第二场 11.22

2020/11/24 DOTA

Python2.x中文乱码问题解决方法

2015/06/02 Python

Python cookbook（数据结构与算法）让字典保持有序的方法

2018/02/18 Python

使用Python正则表达式操作文本数据的方法

2019/05/14 Python

PyQt5实现QLineEdit添加clicked信号的方法

2019/06/25 Python

使用Pandas对数据进行筛选和排序的实现

2019/07/29 Python

pytorch方法测试——激活函数(ReLU)详解

2020/01/15 Python

基于django2.2连oracle11g解决版本冲突的问题

2020/07/02 Python

python 实时调取摄像头的示例代码

2020/11/25 Python

CSS3之transition实现下划线的示例代码

2018/05/30 HTML / CSS

html5 canvas移动浏览器上实现图片压缩上传

2016/03/11 HTML / CSS

四川internet信息高速公路(C#)笔试题

2012/02/29 面试题

简述安装Slackware Linux系统的过程

2012/05/08 面试题

网络书店创业计划书

2014/02/07 职场文书

励志演讲稿范文

2014/04/29 职场文书

辞旧迎新演讲稿

2014/09/15 职场文书

机关党员三严三实心得体会

2014/10/13 职场文书

2015年七一建党节活动总结

2015/03/20 职场文书

健康证明

2015/06/19 职场文书

微软Win11有哪些隐藏功能? windows11多个功能汇总

2021/11/21 数码科技