编程 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实现水平垂直居中效果的方法

Mar 10 HTML / CSS

css3绘制百度的小度熊

Oct 29 HTML / CSS

CSS3中background-clip和background-origin的区别示例介绍

Mar 10 HTML / CSS

纯css3实现效果超级炫的checkbox复选框和radio单选框

Sep 01 HTML / CSS

CSS3只让背景图片旋转180度的实现示例

Mar 09 HTML / CSS

html5 Canvas画图教程(1)—画图的基本常识

Jan 09 HTML / CSS

HTML5之SVG 2D入门3—文本与图像及渲染文本介绍

Jan 30 HTML / CSS

HTML5 Video标签的属性、方法和事件汇总介绍

Apr 24 HTML / CSS

HTML5拖放效果的实现代码

Nov 17 HTML / CSS

HTML5 背景的显示区域实现

Jul 09 HTML / CSS

HTML5超文本标记语言的实现方法

Sep 24 HTML / CSS

使用CSS实现小三角边框原理解析

Nov 07 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获取url字符串截取路径的文件名和扩展名的函数

2010/01/22 PHP

解析PHP 使用curl提交json格式数据

2013/06/29 PHP

PHP异常类及异常处理操作实例详解

2018/12/19 PHP

Javascript 中介者模式实例

2009/12/16 Javascript

一个页面放2段图片滚动代码出现冲突的问题如何解决

2012/12/21 Javascript

JS实现多物体缓冲运动实例代码

2013/11/29 Javascript

javascript获取xml节点的最大值(实现代码)

2013/12/11 Javascript

JQuery做的一个简单的点灯游戏分享

2014/07/16 Javascript

JavaScript的Date()方法使用详解

2015/06/09 Javascript

总结在前端排序中遇到的问题

2016/07/19 Javascript

详解JSON1：使用TSQL查询数据和更新JSON数据

2016/11/21 Javascript

详解React 16 中的异常处理

2017/07/28 Javascript

[原创]微信小程序获取网络类型的方法示例

2019/03/01 Javascript

vue多层嵌套路由实例分析

2019/03/19 Javascript

JavaScript交换两个变量方法实例

2019/11/25 Javascript

浅谈javascript事件环微任务和宏任务队列原理

2020/09/12 Javascript

小程序自定义弹框效果

2020/11/16 Javascript

[03:55]DOTA2完美大师赛选手传记——LFY.MONET

2017/11/18 DOTA

你应该知道的python列表去重方法

2017/01/17 Python

基于python 处理中文路径的终极解决方法

2018/04/12 Python

Python爬虫包BeautifulSoup实例（三）

2018/06/17 Python

Python多线程应用于自动化测试操作示例

2018/12/06 Python

Python中的上下文管理器相关知识详解

2019/09/19 Python

Pycharm 2020.1 版配置优化的详细教程

2020/08/07 Python

python3爬虫中多线程进行解锁操作实例

2020/11/25 Python

洛杉矶时尚女装系列：J.ING US

2019/03/17 全球购物

巴西24小时在线药房：Droga Raia

2020/05/12 全球购物

RUIFIER官网：英国奢侈高级珠宝品牌

2020/06/12 全球购物

师范教师大学生职业生涯规划范文

2014/01/05 职场文书

2014年冬季防火方案

2014/05/21 职场文书

董存瑞观后感

2015/06/11 职场文书

教师网络培训心得体会

2016/01/09 职场文书

使用pandas模块实现数据的标准化操作

2021/05/14 Python

python b站视频下载的五种版本

2021/05/27 Python

Java使用JMeter进行高并发测试

2021/11/23 Java/Android

Java字符缓冲流BufferedWriter

2022/04/09 Java/Android