2D转换方法：transform()、rotate()、scale()、skew()、matrix()

3D转换方法：rotateX()、rotateY()

1.示例代码

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>2D、3D转换</title>
<style>
section{width: 200px;height: 200px;background-color: red;}
/*.then{*/
/*transform: translate(100px,100px);*/
/*-moz-transform: translate(100px,100px);!*Firefox*!*/
/*-webkit-transform: translate(100px,100px);!*Chrome、Safari*!*/
/*-o-transform: translate(100px,100px);!*Opera*!*/
/*-ms-transform: translate(100px,100px);!*IE*!*/
/*}*/
/*.then{transform: rotate(100deg);*/
/*-moz-transform: rotate(100deg);*/
/*-webkit-transform: rotate(100deg);*/
/*-o-transform: rotate(100deg);*/
/*-ms-transform: rotate(100deg);*/
/*}*/
/*.then{transform: scale(1.2,1.2);!*宽度、高度倍数*!*/
/*-moz-transform: scale(1.2,1.2);*/
/*-webkit-transform: scale(1.2,1.2);*/
/*-o-transform: scale(1.2,1.2);*/
/*-ms-transform: scale(1.2,1.2);*/
/*position: relative;*/
/*left: 300px;*/
/*}*/
/*.then{*/
/*transform: skew(20deg,20deg);!*x,y倾斜角度*!*/
/*-moz-transform: skew(20deg,20deg);*/
/*-webkit-transform: skew(20deg,20deg);*/
/*-o-transform: skew(20deg,20deg);*/
/*-ms-transform: skew(20deg,20deg);*/
/*position: relative;*/
/*left: 10px;*/
/*}*/
/*.then{*/
/*transform: rotateX(150deg);*/
/*-moz-transform: rotateX(150deg);*/
/*-webkit-transform: rotateX(150deg);*/
/*-o-transform: rotateX(150deg);*/
/*-ms-transform: rotateX(150deg);*/
/*}*/
.then{
transform: rotateY(150deg);
-moz-transform: rotateY(150deg);
-webkit-transform: rotateY(150deg);
-o-transform: rotateY(150deg);
-ms-transform: rotateY(150deg);
}
</style>
</head>
<body>
<section></section><br/>
<section class="then"></section>
</body>
</html>

2.示例效果图

图1：

sco

图2：

图3：

图4：

图5：

CSS3 2D、3D转换的更多相关文章

  1. CSS自学笔记（13）:CSS3 2D/3D转换

    CSS3中新增了对元素进行2D和3D的转换效果,这样可以是开发人员很方便的做出视觉效果更好的网页来. 通过CSS3中属性的定义,我们可以对元素进行移动.缩放.拉伸.旋转等等,可以通过定义transfo ...

  2. 前端笔记之HTML5&CSS3（下）2D/3D转换&animate动画

    一.2D转换(transform) CSS3中的transform转换和PS中的变换是一样的,分别有:缩放.位移.斜切.旋转 1.1 transform:scale()缩放 transform:sca ...

  3. CSS3中2D/3D转换、过渡、动画

    转换.过渡.动画 2D 转换 1.translate() 方法 通过 translate() 方法,元素从其当前位置移动,根据给定的 left(x 坐标) 和 top(y 坐标) 位置参数: 实例 d ...

  4. HTML5和CSS3实现3D转换效果 CSS3的3D效果

    上次,我们一起研究了css3的2d模块,这次我们一起来看一下css3的3d模块. 首先,我们来了解一下3d的坐标系,x轴在屏幕上为水平方向,y轴为垂直方向,而z轴为垂直于屏幕的方向. 不理解的话可以参 ...

  5. CSS3：3D转换

    几个突破口:(为了更简洁理解,先忽略兼容) 1.认识3D的坐标系 rotateX()-----------元素绕X轴旋转 rotateY() -----------元素绕Y轴旋转 rotateZ() ...

  6. CSS3实现3D转换

    实现效果: 当鼠标悬停在图片上面时,图片发生翻转,文案出来,鼠标取消之后就又恢复 实现代码: <!DOCTYPE html> <html lang="en"> ...

  7. CSS3常用属性(边框、背景、文本效果、2D转换、3D转换、过渡、有过渡效果大图轮播、动画)

    CSS3边框: 1.CSS3圆角:border-radius  属性--创建边框线的圆角 <body style="font-size:24px; color:#60F;"& ...

  8. CSS笔记（十二）CSS3之2D和3D转换

    参考:http://www.w3school.com.cn/css3/css3_2dtransform.asp 2D Transform 方法 函数 描述 matrix(n,n,n,n,n,n) 定义 ...

  9. css3 2d转换3d转换以及动画的知识点汇总

    css3 2d转换 2d转换的方法: 1.移动 translate(x, y) 可以改变元素的位置,x.y可为负值: 2.缩放 scale(x, y) 可以对元素进行水平和垂直方向的缩放,x.y的取值 ...

  10. css3动画2D、3D转换

    css3动画的2D.3D转换代码: <!DOCTYPE html> <html lang="en"> <head> <meta chars ...

随机推荐

  1. Linux设置DNS地址及清理DNS缓存方法

    1.设置DNS地址 编辑vim /etc/resolv.conf 文件. 增加DNS地址:nameserver ip. 2.清理DNS缓存 清理dns缓存: 通过重启nscd服务来达到清理dns缓存的 ...

  2. 使用echarts水球图

    使用echarts水球图 官方实例中没有水球图样式,当我们需要用到水球图的时候需要下载echarts-liquidfill.js. 使用 在echarts之后引入 echarts-liquidfill ...

  3. 使用Dism备份和全新恢复系统

    1.使用WinPE启动,winPE制作可以参考我的另一文章http://www.cnblogs.com/karl-F/p/6934086.html 2.捕获C盘镜像 (1)查看磁盘 在PE提示符:输入 ...

  4. MySQL select语句直接导出数据

    select * into outfile '文件存放路径' from 表名; (先记下来,还未测试)

  5. 日程管理 FullCalendar

    日程管理,采用著名组件FullCalendar日历插件实现FullCalendar提供了丰富的属性设置和方法调用,开发者可以根据FullCalendar提供的API快速完成一个日历日程的开发1.实现按 ...

  6. MySql主键自动生成，表、实体、C#调用方法

    1.表:mysql建表语句 DROP TABLE IF EXISTS `keycode`; CREATE TABLE `keycode` ( `Id` ) NOT NULL AUTO_INCREMEN ...

  7. PAT Public Bike Management (dfs)

    思路:你的答案必须满足三个条件: 1.在所有路径中选择最短的: 2.如果路径相等,则选择从PBMC中送出最少的: 3.如果路径相等且PBMC送出的车也相等,则选择带回最少的. 注意:这题很恶心,你要考 ...

  8. HDU - 1430 魔板 (bfs预处理 + 康托)

    对于该题可以直接预处理初始状态[0, 1, 2, 3, 4, 5, 6, 7]所有可以到达的状态,保存到达的路径,直接打印答案即可. 关于此处的状态转换:假设有初始状态为2,3,4,5,0,6,7,1 ...

  9. Vmware下centos与windows能ping通并能上网

    1.桥接模式 2.NAT模式 3.Host-Only模式 1.桥接模式 vim /etc/udev/rules.d/70-persistent-net.rules 与/etc/sysconfig/ne ...

  10. Web渗透测试（sql注入 access，mssql，mysql，oracle，）

    Access数据库注入: access数据库由微软发布的关系型数据库(小型的),安全性差. access数据库后缀名位*.mdb, asp中连接字符串应用-- "Driver={micros ...