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

35款精致的 CSS3 和 HTML5 网页模板推荐

Aug 03 HTML / CSS

CSS3系列教程:背景图片(背景大小和多背景图) 应用说明

Dec 19 HTML / CSS

CSS3之边框多颜色Border-color属性使用示例

Oct 11 HTML / CSS

css3中transition属性详解

Sep 02 HTML / CSS

纯CSS3发光分享按钮的实现教程

Sep 06 HTML / CSS

CSS3实现王者荣耀匹配人员加载页面的方法

Apr 16 HTML / CSS

css3实现圆锥渐变conic-gradient效果

Feb 12 HTML / CSS

HTML5中的Article和Section元素认识及使用

Mar 22 HTML / CSS

HTML5计时器小例子

Oct 15 HTML / CSS

HTML5 Canvas实现图片缩放、翻转、颜色渐变的代码示例

Feb 28 HTML / CSS

基于HTML5+CSS3实现简单的时钟效果

Sep 11 HTML / CSS

HTML5的postMessage的使用手册

Dec 19 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 MemCached 高级缓存应用代码

2010/08/05 PHP

利用PHP判断是否是连乘数字串的方法示例

2017/07/03 PHP

PHP预定义超全局数组变量小结

2018/08/20 PHP

php设计模式之状态模式实例分析【星际争霸游戏案例】

2020/03/26 PHP

javascript下操作css的float属性的特殊写法

2007/08/22 Javascript

jQuery 开天辟地入门篇一

2009/12/09 Javascript

工作中常用到的JS表单验证代码(包括例子)

2010/11/11 Javascript

css样式标签和js语法属性区别

2013/11/06 Javascript

jquery xMarquee实现文字水平无缝滚动效果

2014/04/29 Javascript

jQuery多项选项卡的实现思路附样式及代码

2014/06/03 Javascript

jQuery实现滑动页面固定顶部显示(可根据显示位置消失与替换)

2015/10/28 Javascript

JS组件Bootstrap Table布局详解

2016/05/27 Javascript

javascript设置文本框光标的方法实例小结

2016/11/04 Javascript

node+vue实现用户注册和头像上传的实例代码

2017/07/20 Javascript

ES6学习教程之Map的常用方法总结

2017/08/03 Javascript

微信小程序获取循环元素id以及wx.login登录操作

2017/08/17 Javascript

AngularJS中控制器函数的定义与使用方法示例

2017/10/10 Javascript

jQuery读取本地的json文件(实例讲解)

2017/10/31 jQuery

让 babel webpack vue 配置文件支持智能提示的方法

2019/06/22 Javascript

Layer UI表格列日期格式化及取消自动填充日期的实现方法

2020/05/10 Javascript

vue3.0自定义指令（drectives)知识点总结

2020/12/27 Vue.js

[02:44]DOTA2英雄基础教程钢背兽

2013/12/19 DOTA

[46:12]完美世界DOTA2联赛循环赛 DM vs Matador BO2第一场 11.04

2020/11/04 DOTA

python实现聚类算法原理

2018/02/12 Python

python 异或加密字符串的实例

2018/10/14 Python

python实现简单名片管理系统

2018/11/30 Python

简单介绍python封装的基本知识

2019/08/10 Python

学校食堂食品安全责任书

2014/07/28 职场文书

医生党的群众路线教育实践活动个人对照检查材料

2014/09/23 职场文书

服务整改报告

2014/11/06 职场文书

社区好人好事材料

2014/12/26 职场文书

横空出世观后感

2015/06/09 职场文书

新郎新娘致辞

2015/07/31 职场文书

《惊弓之鸟》教学反思

2016/02/20 职场文书

导游词之舟山普陀山

2019/11/06 职场文书

Python基础之pandas数据合并

2021/04/27 Python