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

CSS实现圆形放大镜狙击镜效果只有圆圈里的放大

Dec 10 HTML / CSS

实例讲解CSS3中的box-flex弹性盒属性布局

Jun 09 HTML / CSS

css3 中translate和transition的使用方法

Mar 26 HTML / CSS

详解css3 flex弹性盒自动铺满写法

Sep 17 HTML / CSS

html5 canvas里绘制椭圆并保持线条粗细均匀的技巧

Mar 25 HTML / CSS

HTML5不支持标签和新增标签详解

Jun 27 HTML / CSS

html5实现滑块功能之type="range"属性

Feb 18 HTML / CSS

canvas小画板之平滑曲线的实现

Aug 12 HTML / CSS

浅谈amaze-ui中datepicker和datetimepicker注意的几点

Aug 21 HTML / CSS

Canvas在超级玛丽游戏中的应用详解

Feb 06 HTML / CSS

HTML中table表格拆分合并(colspan、rowspan)

Apr 07 HTML / CSS

css3 文字断裂效果

Apr 22 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/12/30 PHP

PHP实现变色验证码实例

2014/01/06 PHP

php制作的简单验证码识别代码

2016/01/26 PHP

Laravel日志用法详解

2016/10/09 PHP

Linux服务器下PHPMailer发送邮件失败的问题解决

2017/03/04 PHP

js实现快速分享功能(你的文章分享工具)

2013/06/25 Javascript

jquery选择符快速提取web表单数据示例

2014/03/27 Javascript

用javascript关闭本窗口不弹出询问框的方法

2014/09/12 Javascript

jQuery+AJAX实现网页无刷新上传

2015/02/22 Javascript

跟我学习javascript创建对象(类)的8种方法

2015/11/20 Javascript

javascript实现图片轮播效果

2016/01/20 Javascript

Node.js读写文件之批量替换图片的实现方法

2016/09/07 Javascript

可输入文字查找ajax下拉框控件 ComBox的实现方法

2016/10/25 Javascript

AngularJS的Filter的示例详解

2017/03/07 Javascript

js实现拖拽上传图片功能

2017/08/01 Javascript

jQuery取得元素标签名称小结（附代码）

2017/08/16 jQuery

实例解析ES6 Proxy使用场景介绍

2018/01/08 Javascript

实现高性能javascript的注意事项

2019/05/27 Javascript

kafka调试中遇到Connection to node -1 could not be established. Broker may not be available.

2019/09/17 Javascript

原生javascript运动函数的封装示例【匀速、抛物线、多属性的运动等】

2020/02/23 Javascript

vue.js封装switch开关组件的操作

2020/10/26 Javascript

Python中模块pymysql查询结果后如何获取字段列表

2017/06/05 Python

HTML中使用python屏蔽一些基本功能的方法

2017/07/07 Python

Python远程开发环境部署与调试过程图解

2019/12/09 Python

深入解析HTML5 Canvas控制图形矩阵变换的方法

2016/03/24 HTML / CSS

eBay法国购物网站：eBay.fr

2017/10/21 全球购物

Cole Haan官方网站：美国时尚潮流品牌

2017/12/06 全球购物

匈牙利超级网上商店和优惠：Alza.hu

2019/12/17 全球购物

信访工作者先进事迹

2014/01/17 职场文书

2014年幼儿园植树节活动方案

2014/03/02 职场文书

感恩老师演讲稿600字

2014/08/28 职场文书

2014年重阳节敬老活动方案

2014/09/16 职场文书

合伙开公司协议书范本

2014/10/28 职场文书

2015年教学副校长工作总结

2015/07/22 职场文书

初一语文教学反思

2016/03/03 职场文书

python pygame 开发五子棋双人对弈

2022/05/02 Python