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压缩解压命令汇总

    01-.tar格式 解包:[*******]$ tar xvf FileName.tar 打包:[*******]$ tar cvf FileName.tar DirName (注:tar是打包,不是 ...

  2. CLR via C#读书日记一' 引用类型和值类型'

    CLR支持两种类型:引用类型和值类型. 引用类型总是在托管堆上分配的,C#的new操作符会返回对象的内存地址——也就是指向对象数据的内存地址. 使用引用类型必须注意到一些问题: 1)内存必须从托管堆上 ...

  3. MessagePack简析

    一.MessagePack是什么 先看官方的定义:MessagePack是一种高效的二进制序列化格式.它允许您像JSON一样在多个语言之间交换数据.但是,它更快并且更小. 从官方定义中,可以有如下的结 ...

  4. [Python Study Notes]CS架构远程访问获取信息--Client端v2.0

    更新内容: 1.增加内存信息获取 2.增加电池信息获取 3.增加磁盘信息获取 4.重新布局窗体 5.增加窗体名称 6.增加连接成功之前,不可按压 效果图: '''''''''''''''''''''' ...

  5. R语言-来自Prosper的贷款数据探索

    案例分析:Prosper是美国的一家P2P在线借贷平台,网站撮合了一些有闲钱的人和一些急用钱的人.用户若有贷款需求,可在网站上列出期望数额和可承受的最大利率.潜在贷方则为数额和利率展开竞价. 本项目拟 ...

  6. .NET平台开源项目速览(19)Power BI神器DAX Studio

    PowerBI更新频繁,已经有点更不上的节奏,一直在关注和学习中,基本的一些操作大概是没问题,更重要的是注重Power Query,M函数,以及DAX的使用,这才是核心.   上个月研究了DAX的一些 ...

  7. Java中的volatile的作用和synchronized作用

    volatile该关键字是主要使用的场合是字啊多个线程中可以感知实例的变量被更改了并且可以获取到最新的值进行使用,也就是用多线程读取共享变量的时候可以获取到最新的值使用.不能保障原子性 如果你在jvm ...

  8. XP环境下的网络证书问题

    项目过程中,由于是收银系统需要从服务器获取支付二维码,会产生SSL连接的问题,在win7.win10上都没有问题,放到WIN XP上出现了The underlying connection was c ...

  9. 轻松搭建Git服务器(Ubuntu)

    搭建Git服务器 在远程仓库节中,我们讲了远程仓库实际上和本地仓库没啥不同,纯粹为了7x24小时开机并交换大家的修改. GitHub就是一个免费托管开源代码的远程仓库.但是对于某些视源代码如生命的商业 ...

  10. 关于C/S框架网单表绑定，查询

    这种绑定暂时支持单表,并且不支持主键自增长!保存,删除,查看,修改用框架现成的. 1.先生成tb.bll.dal三个类.框架有生成工具,在debug文件里面有个叫CSFramework.Tools.C ...