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. fatal error C1083:无法打开包括文件:“stdint.h”: No such file or directory解决方案

    stdint.h文件是C99的标准头文件,默认情况下VC是不支持的,所以在使用过程中肯定会碰到 "No such file or directory"的问题. 解决办法 1.从网盘 ...

  2. Oracle-11g 中使用表空间透明数据加密（TDE）

    Oracle-11g 中使用表空间透明数据加密(TDE)的限制 TDE 表空间加密方式会在数据读写过程中加解密数据.与在 SQL 层面做加解密的 TDE 列加密方式相比,其限制要大幅减少.例如:数据类 ...

  3. yii2 源码分析 object类分析 （一）

    转载请注明链接http://www.cnblogs.com/liuwanqiu/p/6737327.html yii2基本上所有的类都是继承的object类,下面就来分析一下object类吧 obje ...

  4. yum出问题啦

    BUG 不小心把/usr/local上的一堆文件(夹)给删除了,于是乎,一堆问题冒出来了 loading mirror speeds from cached hostfile 解决方法 一定要执行 y ...

  5. 搭建SS服务器

    体验: http://ss.ishadowx.com/ centos7 安装shadowsocks客户端 http://blog.csdn.net/guyan0319/article/details/ ...

  6. egametang网络系统组件

    先看一下网络组件的中层: AService抽象了udp和tcp协议的连接工厂,udp的连接方式也被封装的和tcp类似,但是一个接收连接的UService只能建立一个连接.这个接口既可以做服务端通过Ac ...

  7. Django——ContentType及ContentType-signals的使用

    一.ContentType 在django中,有一个记录了项目中所有model元数据的表,就是ContentType,表中一条记录对应着一个存在的model,所以可以通过一个ContentType表的 ...

  8. Linux-PATH_环境变量

    PATH变量         是linux系统里的一个环境变量,系统已经定义好了,我们不需要再定义. 作用:         是linux里使用的命令都存在在PATH变量后面指定的目录下,我们使用命令 ...

  9. 基于agenda的Nodejs定时任务管理框架搭建

    0.背景 在大型项目中,定时任务的应用场景越来越广.一般来说,按照微服务的思想,我们会将定时任务单独部署一套服务,核心的业务接口独立到另一个服务中,从而降低相互之间的耦合程度.在需要使用定时任务时,只 ...

  10. 数据库中字段类型对应的C#中的数据类型（转载）

    数据库中字段类型对应C#中的数据类型: 数据库                 C#程序 int int32 text string bigint int64 binary System.Byte[] ...