编程 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 特效范例整理

Aug 22 HTML / CSS

利用CSS3的border-radius绘制太极及爱心图案示例

May 17 HTML / CSS

css3动画效果小结(推荐)

Jul 25 HTML / CSS

html5视频播放_动力节点Java学院整理

Jul 13 HTML / CSS

HTML5所有标签汇总及标签意义解释

Mar 12 HTML / CSS

使用HTML5 Canvas API控制字体的显示与渲染的方法

Mar 24 HTML / CSS

CSS3 画基本图形，圆形、椭圆形、三角形等

Sep 20 HTML / CSS

HTML5拖放API实现拖放排序的实例代码

May 11 HTML / CSS

Html5 APP中监听返回事件处理的方法示例

Mar 15 HTML / CSS

html5唤醒APP小记

Mar 27 HTML / CSS

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

Aug 21 HTML / CSS

css3 利用transform-origin 实现圆点分布在大圆上布局及旋转特效

Apr 29 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

一个ORACLE分页程序，挺实用的.

2006/10/09 PHP

PHP session常见问题集锦及解决办法总结

2007/03/18 PHP

如何用php获取程序执行的时间

2013/06/09 PHP

php 读取文件头判断文件类型的实现代码

2013/08/05 PHP

php $_SERVER windows系统与linux系统下的区别说明

2014/02/14 PHP

解决cPanel无法安装php5.2.17

2014/06/22 PHP

php操作csv文件代码实例汇总

2014/09/22 PHP

laravel 获取某个查询的查询SQL语句方法

2019/10/12 PHP

JS实现self的resend

2010/07/22 Javascript

JQuery动态给table添加、删除行改进版

2011/01/19 Javascript

jQuery基本选择器选择元素使用介绍

2013/04/18 Javascript

JS实现图片翻书效果示例代码

2013/09/09 Javascript

jquery Ajax 实现加载数据前动画效果的示例代码

2014/02/07 Javascript

jQuery中事件对象e的事件冒泡用法示例介绍

2014/04/25 Javascript

jQuery移除元素自动解绑事件实现思路及代码

2014/05/31 Javascript

javascript+canvas制作九宫格小程序

2014/12/28 Javascript

TypeScript具有的几个不同特质

2015/04/07 Javascript

localResizeIMG先压缩后使用ajax无刷新上传（移动端）

2015/08/11 Javascript

AngularJS报错$apply already in progress的解决方法分析

2017/01/30 Javascript

node文字生成图片的示例代码

2017/10/26 Javascript

微信小程序左滑动显示菜单功能的实现

2018/06/14 Javascript

浅谈bootstrap layer.open中end的使用方法

2019/09/12 Javascript

解决 window.onload 被覆盖的问题方法

2020/01/14 Javascript

Node.js中出现未捕获异常的处理方法

2020/06/29 Javascript

python实现哈希表

2014/02/07 Python

浅谈用VSCode写python的正确姿势

2017/12/16 Python

python中subprocess批量执行linux命令

2018/04/27 Python

Django实现全文检索的方法(支持中文)

2018/05/14 Python

python基于三阶贝塞尔曲线的数据平滑算法

2019/12/27 Python

CSS3中的元素过渡属性transition示例详解

2016/11/30 HTML / CSS

优秀毕业生求职信范文

2014/01/02 职场文书

学校门卫岗位职责范本

2014/06/30 职场文书

2015年前台接待工作总结

2015/05/04 职场文书

2015年办税服务厅工作总结

2015/07/23 职场文书

2016年党员岗位承诺书

2016/03/24 职场文书

Nginx+Tomcat负载均衡多实例详解

2022/04/11 Servers