编程 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实现轮播图效果实例

May 04 HTML / CSS

分享30个新鲜的CSS3打造的精美绚丽效果(附演示下载)

Dec 28 HTML / CSS

CSS类名支持中文命名的示例

Apr 04 HTML / CSS

详解CSS3选择器的使用方法汇总

Nov 24 HTML / CSS

css3学习系列之移动属性详解

Jul 04 HTML / CSS

利用CSS3动画实现圆圈由小变大向外扩散的效果实例

Sep 10 HTML / CSS

HTML5打开本地app应用的方法

Mar 31 HTML / CSS

用html5的canvas画布绘制贝塞尔曲线完整代码

Aug 14 HTML / CSS

HTML5 video标签（播放器）学习笔记（一）:使用入门

Apr 24 HTML / CSS

canvas 阴影和图形变换的示例代码

Jan 02 HTML / CSS

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

Apr 23 HTML / CSS

如何使用amaze ui的分页样式封装一个通用的JS分页控件

Aug 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

You might like

php下mysql数据库操作类(改自discuz)

2010/07/03 PHP

yii框架源码分析之创建controller代码

2011/06/28 PHP

PHP中文编码小技巧

2014/12/25 PHP

php采集中国代理服务器网的方法

2015/06/16 PHP

laravel手动创建数组分页的实现代码

2018/06/07 PHP

php上传图片并给图片打上透明水印的代码

2010/06/07 Javascript

jQuery之日期选择器的深入解析

2013/06/19 Javascript

js取消单选按钮选中示例代码

2013/11/14 Javascript

js this函数调用无需再次抓获id，name或标签名

2014/03/03 Javascript

学习Angularjs分页指令

2016/07/01 Javascript

JS在Chrome浏览器中showModalDialog函数返回值为undefined的解决方法

2016/08/03 Javascript

bootstrap下拉菜单使用方法解析

2017/01/13 Javascript

Node学习记录之cluster模块

2017/05/31 Javascript

vue 标签属性数据绑定和拼接的实现方法

2018/05/17 Javascript

jQuery的ztree仿windows文件新建和拖拽功能的实现代码

2018/12/05 jQuery

js实现鼠标拖拽缩放div实例代码

2019/03/25 Javascript

Vue Components 数字键盘的实现

2019/09/18 Javascript

node使用mysql获取数据库数据中文乱码问题的解决

2019/12/02 Javascript

在Python的Flask框架中使用模版的入门教程

2015/04/20 Python

scrapy爬虫实例分享

2017/12/28 Python

python实现读取大文件并逐行写入另外一个文件

2018/04/19 Python

Python结合ImageMagick实现多张图片合并为一个pdf文件的方法

2018/04/24 Python

PyTorch线性回归和逻辑回归实战示例

2018/05/22 Python

利用rest framework搭建Django API过程解析

2019/08/31 Python

HTML5的结构和语义(3):语义性的块级元素

2008/10/17 HTML / CSS

详解移动端html5页面长按实现高亮全选文本内容的兼容解决方案

2016/12/03 HTML / CSS

Roxy俄罗斯官方网站：冲浪和滑雪板的一切

2020/06/20 全球购物

编码实现字符串转整型的函数

2012/06/02 面试题

英语专业推荐信

2013/11/16 职场文书

经典婚礼主持开场白

2014/03/13 职场文书

解放思想大讨论活动心得体会

2014/09/11 职场文书

党员对十八届四中全会的期盼思想汇报范文

2014/10/17 职场文书

求职自荐信范文（优秀篇）

2015/03/27 职场文书

活动新闻稿范文

2015/07/17 职场文书

施工安全责任协议书

2016/03/23 职场文书

win10安装配置nginx的过程

2021/03/31 Servers