编程 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 box-shadow阴影(外阴影与外发光)图示讲解

Aug 11 HTML / CSS

详解css3 object-fit属性

Jul 27 HTML / CSS

HTML5+CSS3网页加载进度条的实现，下载进度条的代码实例

Dec 30 HTML / CSS

html5标记文字_动力节点Java学院整理

Jul 11 HTML / CSS

html5的canvas实现3d雪花飘舞效果

Dec 27 HTML / CSS

HTML5实现的图片无限加载的瀑布流效果另带边框圆角阴影

Mar 07 HTML / CSS

让IE9以下版本的浏览器兼容HTML5的方法

Mar 12 HTML / CSS

HTML5新增加的功能详解

Sep 05 HTML / CSS

HTML5本地存储和本地数据库实例详解

Sep 05 HTML / CSS

如何给HTML标签中的文本设置修饰线

Nov 18 HTML / CSS

原生canvas制作画图小工具的踩坑和爬坑

Jun 09 HTML / CSS

HTML5 背景的显示区域实现

Jul 09 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

PHILIPS AE3805收音机的分析打磨

2021/03/02 无线电

php adodb连接mssql解决乱码问题

2009/06/12 PHP

ionCube 一款类似zend的PHP加密/解密工具

2010/07/25 PHP

PHP header()函数常用方法总结

2014/04/11 PHP

php中青蛙跳台阶的问题解决方法

2018/10/14 PHP

PHP+iframe模拟Ajax上传文件功能示例

2019/07/02 PHP

WordPress免插件实现面包屑导航的示例代码

2020/08/20 PHP

HR vs ForZe BO3 第二场 2.13

2021/03/10 DOTA

js 事件小结表格区别

2007/08/13 Javascript

修改jQuery.Autocomplete插件支持中文输入法避免TAB、ENTER键失效、导致表单提交

2009/10/11 Javascript

JavaScript继承基础讲解(原型链、借用构造函数、混合模式、原型式继承、寄生式继承、寄生组合式继承)

2014/08/16 Javascript

jQuery对象的length属性用法实例

2014/12/27 Javascript

jQuery焦点图切换特效代码分享

2015/09/15 Javascript

简介EasyUI datagrid editor combogrid搜索框的实现

2016/04/01 Javascript

AngularJs篇：使用AngularJs打造一个简易权限系统的实现代码

2016/12/26 Javascript

js遍历获取表格内数据的方法(必看)

2017/04/06 Javascript

详解Angular.js中$http拦截器的介绍及使用

2017/07/04 Javascript

详解ES6中的代理模式——Proxy

2018/01/08 Javascript

Vue写一个简单的倒计时按钮功能

2018/04/20 Javascript

jQuery实现简单复制json对象和json对象集合操作示例

2018/07/09 jQuery

vuex实现像调用模板方法一样调用Mutations方法

2019/11/06 Javascript

微信小程序仿通讯录功能

2020/04/09 Javascript

OpenLayers3实现测量功能

2020/09/25 Javascript

[01:03:47]VP vs NewBee Supermajor 胜者组 BO3 第一场 6.5

2018/06/06 DOTA

Python下载指定页面上图片的方法

2016/05/12 Python

python正则表达式之对号入座篇

2018/07/24 Python

Atom Python 配置Python3 解释器的方法

2019/08/28 Python

PyCharm无法识别PyQt5的2种解决方法，ModuleNotFoundError: No module named 'pyqt5'

2020/02/17 Python

在keras中model.fit_generator()和model.fit()的区别说明

2020/06/17 Python

opencv 形态学变换(开运算，闭运算，梯度运算)

2020/07/07 Python

C++和python实现阿姆斯特朗数字查找实例代码

2020/12/07 Python

Herschel Supply Co.美国：背包、手提袋及配件

2020/11/24 全球购物

暑期培训心得体会

2014/09/02 职场文书

水利专业大学生职业生涯规划书范文

2014/09/17 职场文书

2014年光棍节活动策划方案（创意集锦）

2014/09/29 职场文书

中学图书馆工作总结

2015/08/11 职场文书