编程 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 相关文章推荐

收集的7个CSS3代码生成工具

Apr 17 HTML / CSS

CSS3 Media Queries(响应式布局可以让你定制不同的分辨率和设备)

Jun 06 HTML / CSS

使用 css3 实现圆形进度条的示例

Jul 05 HTML / CSS

css3实现六边形边框的实例代码

May 24 HTML / CSS

html5+css3之制作header实例与更新

Dec 21 HTML / CSS

前端canvas水印快速制作（附完整代码)

Sep 19 HTML / CSS

关于HTML5的22个初级技巧(图文教程)

Jun 21 HTML / CSS

html5 css3网站菜单实现代码

Dec 23 HTML / CSS

HTML5中form如何关闭自动完成功能的方法

Jul 02 HTML / CSS

HTML5中使用json对象的实例代码

Sep 10 HTML / CSS

纯 CSS 自定义多行省略的问题(从原理到实现)

Nov 11 HTML / CSS

分享几个实用的CSS代码块

Jun 10 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中判断变量为空的几种方法小结

2013/11/12 PHP

laravel批量生成假数据的方法

2019/10/09 PHP

jquery DOM操作基于命令改变页面

2010/05/06 Javascript

jquery乱码与contentType属性设置问题解决方案

2013/01/07 Javascript

jquery修改网页背景颜色通过css方法实现

2014/06/06 Javascript

javascript比较两个日期的先后示例代码

2014/12/31 Javascript

Kindeditor在线文本编辑器如何过滤HTML

2016/04/14 Javascript

jQuery实现下拉框左右移动（全部移动，已选移动）

2016/04/15 Javascript

快速解决Canvas.toDataURL 图片跨域的问题

2016/05/10 Javascript

js 实现一些跨浏览器的事件方法详解及实例

2016/10/27 Javascript

微信页面倒计时代码（解决safari不兼容date的问题）

2016/12/13 Javascript

jQuery Validate表单验证插件的基本使用方法及功能拓展

2017/01/04 Javascript

Vue 多层组件嵌套二种实现方式(测试实例)

2017/09/08 Javascript

Vue.js实现可配置的登录表单代码详解

2018/03/29 Javascript

javascript实现前端分页效果

2020/06/24 Javascript

JavaScript中while循环的基础使用教程

2020/08/11 Javascript

pycharm 主题theme设置调整仿sublime的方法

2018/05/23 Python

解决Django的request.POST获取不到内容的问题

2018/05/28 Python

详解python分布式进程

2018/10/08 Python

Python学习笔记之lambda表达式用法详解

2019/08/08 Python

基于python实现文件加密功能

2020/01/06 Python

Python运行DLL文件的方法

2020/01/17 Python

Keras中的多分类损失函数用法categorical_crossentropy

2020/06/11 Python

完美解决torch.cuda.is_available()一直返回False的玄学方法

2021/02/06 Python

CK澳大利亚官网：Calvin Klein澳大利亚

2020/12/12 全球购物

几个Linux面试题笔试题

2016/08/01 面试题

应届生如何写自荐信

2014/01/05 职场文书

5.12护士节演讲稿

2014/04/30 职场文书

2014年入党积极分子党校培训心得体会

2014/07/08 职场文书

学习实践科学发展观心得体会

2014/09/10 职场文书

乡镇党员干部四风对照检查材料思想汇报

2014/09/27 职场文书

员工保密协议书

2014/09/27 职场文书

2015年卫生监督工作总结

2015/05/21 职场文书

MySQL中distinct和count(*)的使用方法比较

2021/05/26 MySQL

在Java中Collection的一些常用方法总结

2021/06/13 Java/Android

Pytest中skip和skipif的具体使用方法

2021/06/30 Python