编程 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教程(9):设置RGB颜色

Apr 02 HTML / CSS

使用CSS3的appearance属性改变元素的外观的方法

Dec 12 HTML / CSS

详解Html5微信支付爬坑之路

Jul 24 HTML / CSS

HTML5中新标签和常用标签详解

Mar 07 HTML / CSS

整理HTML5中表单的常用属性及新属性

Feb 19 HTML / CSS

HTML5中indexedDB 数据库的使用实例

May 11 HTML / CSS

浅析HTML5中的 History 模式

Jun 22 HTML / CSS

一文彻底解决HTML5页面中长按保存图片功能

Jun 10 HTML / CSS

浅析canvas元素的html尺寸和css尺寸对元素视觉的影响

Jul 22 HTML / CSS

HTML5中 rem适配方案与 viewport 适配问题详解

Apr 27 HTML / CSS

css display table 自适应高度、宽度问题的解决

May 07 HTML / CSS

CSS的class与id常用的命名规则

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

世界咖啡生产者论坛呼吁：需要立即就咖啡价格采取认真行动

2021/03/06 咖啡文化

如何用PHP实现插入排序？

2013/04/10 PHP

php实现删除空目录的方法

2015/03/16 PHP

使用ThinkPHP的自动完成实现无限级分类实例详解

2016/09/02 PHP

PHP中字符串长度的截取用法示例

2017/01/12 PHP

PHP-FPM和Nginx的通信机制详解

2019/02/01 PHP

JQuery触发事件例如click

2013/09/11 Javascript

快速解决jQuery与其他库冲突的方法介绍

2014/01/02 Javascript

JavaScript中的事件委托及好处

2016/07/12 Javascript

Vue.js基础知识小结

2017/01/13 Javascript

jQuery 实现图片的依次加载图片功能

2017/07/06 jQuery

浅谈原生JS中的延迟脚本和异步脚本

2017/07/12 Javascript

详解Layer弹出层样式

2017/08/21 Javascript

原生js添加一个或多个类名的方法分析

2019/07/30 Javascript

vue中使用GraphQL的实例代码

2019/11/04 Javascript

在webstorm中配置less的方法详解

2020/09/25 Javascript

python实现sublime3的less编译插件示例

2014/04/27 Python

Python中的__slots__示例详解

2017/07/06 Python

利用python编写一个图片主色转换的脚本

2017/12/07 Python

浅谈python正则的常用方法覆盖范围70%以上

2018/03/14 Python

python3使用smtplib实现发送邮件功能

2018/05/22 Python

python opencv实现旋转矩形框裁减功能

2018/07/25 Python

Python基础学习之函数方法实例详解

2019/06/18 Python

Python如何筛选序列中的元素的方法实现

2019/07/15 Python

详解基于canvas的视频遮罩插件

2018/01/04 HTML / CSS

html5实现多图片预览上传及点击可拖拽控件

2018/03/15 HTML / CSS

温泉秘密：Onsen Secret

2020/07/06 全球购物

使用useBean标志初始化BEAN时如何接受初始化参数

2012/02/11 面试题

行政人事专员岗位职责

2014/03/05 职场文书

汽车销售经理岗位职责

2014/06/09 职场文书

2014年学生会部门工作总结

2014/11/07 职场文书

公司搬迁通知

2015/04/20 职场文书

单位证明范文

2015/06/18 职场文书

2016全国“质量月”活动标语口号

2015/12/26 职场文书

2016秋季运动会开幕词

2016/03/04 职场文书

解析python中的jsonpath 提取器

2022/01/18 Python