编程 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和布局经验与要点

Apr 09 HTML / CSS

基于css3 animate制作绚丽的动画效果

Nov 24 HTML / CSS

详解css position 5种不同的值的用法

Jul 30 HTML / CSS

纯CSS3实现鼠标滑过按钮动画第二节

Jul 16 HTML / CSS

详解FireFox下Canvas使用图像合成绘制SVG的Bug

Jul 10 HTML / CSS

突袭HTML5之Javascript API扩展2—地理信息服务及地理位置API学习

Jan 31 HTML / CSS

html5+css3实现一款注册表单实例

Apr 17 HTML / CSS

html5使用canvas画一条线

Dec 15 HTML / CSS

详解HTML5 Canvas绘制不规则图形时的非零环绕原则

Mar 21 HTML / CSS

基于MUI框架使用HTML5实现的二维码扫描功能

Mar 01 HTML / CSS

详解HTML5.2版本带来的修改

May 06 HTML / CSS

详解如何获取localStorage最大存储大小的方法

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

用ＰＨＰ和ＡＣＣＥＳＳ写聊天室(四)

2006/10/09 PHP

php导出CSV抽象类实例

2014/09/24 PHP

又十个超级有用的PHP代码片段

2015/09/24 PHP

ThinkPHP3.2框架自定义配置和加载用法示例

2018/06/14 PHP

JavaScript CSS修改学习第三章修改样式表

2010/02/19 Javascript

利用腾讯的ip地址库做ip物理地址定位

2010/07/24 Javascript

jQuery中:reset选择器用法实例

2015/01/04 Javascript

Javascript的表单验证-提交表单

2016/03/18 Javascript

Winform客户端向web地址传参接收参数的方法

2016/05/17 Javascript

如何在 Vue.js 中使用第三方js库

2017/04/25 Javascript

微信小程序视图template模板引用的实例详解

2017/09/20 Javascript

浅谈angular4实际项目搭建总结

2017/12/01 Javascript

vue2.0.js的多级联动选择器实现方法

2018/02/09 Javascript

JavaScript 高性能数组去重的方法

2018/09/20 Javascript

微信小程序BindTap快速连续点击目标页面跳转多次问题处理

2019/04/08 Javascript

element-ui 本地化使用教程详解

2019/10/28 Javascript

python解析html开发库pyquery使用方法

2014/02/07 Python

使用python将mdb数据库文件导入postgresql数据库示例

2014/02/17 Python

如何高效使用Python字典的方法详解

2017/08/31 Python

Python KMeans聚类问题分析

2018/02/23 Python

python时间日期函数与利用pandas进行时间序列处理详解

2018/03/13 Python

解决Python网页爬虫之中文乱码问题

2018/05/11 Python

python程序变成软件的实操方法

2019/06/24 Python

Python Selenium 之数据驱动测试的实现

2019/08/01 Python

Python如何实现机器人聊天

2020/09/10 Python

python 如何调用 dubbo 接口

2020/09/24 Python

谈谈对css属性box-sizing的了解

2017/01/04 HTML / CSS

美国背景检查、公共记录和人物搜索网站：BeenVerified

2018/02/25 全球购物

新闻专业学生的自我评价

2014/02/13 职场文书

市级青年文明号申报材料

2014/05/26 职场文书

2014年企业工会工作总结

2014/11/12 职场文书

小学教师师德师风自我评价

2015/03/04 职场文书

汤姆索亚历险记读书笔记

2015/06/29 职场文书

使用HTML+Css+transform实现3D导航栏的示例代码

2021/03/31 HTML / CSS

java设计模式--原型模式详解

2021/07/21 Java/Android

uniapp 微信小程序自定义tabBar 导航

2022/04/22 Javascript