2D转换

1、rotate()   旋转



<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>


<div style="width: 200px;height: 200px;background: red;margin: 100px auto; transform: rotate(30deg);"></div><!--值可以为负数-->


</body>
</html>






2、scale() 放大或缩小




<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

    </head>

    <body>

        <div style="width: 200px;height: 200px;background: blue;margin: 100px auto;"></div><!--这是一个参照物-->

        <div style="width: 200px;height: 200px;background: red;margin: 100px auto; transform: scale(1.3,1.2);"></div><!--两个值,分别是x,y正数就是放大,负数就是缩小-->

    </body>

</html>




3、skew() 倾斜




<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

    </head>

    <body><>

        <div style="width: 200px;height: 200px;background: red;margin: 100px auto; transform:skew(30deg,20deg);"></div><!--两个值分别为x,y轴,值为负数时,方向就反方向-->

    </body>

</html>




4、matrix() matrix 方法有六个参数，包含旋转，缩放，移动（平移）和倾斜功能




<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

    </head>

    <body>

                <div style="width: 200px;height: 200px;background: blue;margin: 100px auto;">我是参照物</div>

        <div style="width: 200px;height: 200px;background: red;border:1px solid black;margin: 100px auto; transform:matrix(0.866,0.5,-0.5,0.866,0,0);">旋转，缩放，移动（平移）和倾斜功能</div>
　　　　　　　　　　　　　　　　　　　　　　　　　　　　<!--这个方式是,把就六种方法集合在一起展示-->

    </body>

</html>




5、translate()




<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

    </head>

    <body>

        <div style="width: 200px;height: 200px;background: blue;margin: 100px auto;">我是参照物</div>

        <div style="width: 200px;height: 200px;background: red;border:1px solid black;margin: 100px auto; transform: translate(50px,100px);"></div>

　　　　　　　　<!--根据左(X轴)和顶部(Y轴)位置给定的参数，从当前元素位置移动-->    
</body>

</html>




3D转换


1、rotateX()   X轴旋转




<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

    </head>

    <body>

         <div style="width: 200px;height: 200px;background: blue;margin: 100px auto;">我是参照物</div>

        <div style="width: 200px;height: 200px;background: red;border:1px solid black;margin: 100px auto;transform:rotateX(120deg);">哈哈哈哈哈哈哈哈哈哈哈哈哈哈好搞笑啊</div>

　　　　　　<!--是围绕本身在一个给定度数X轴旋转的元素-->   
 </body>

</html>




2、rotate（） Y轴旋转




<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

    </head>

    <body>

        <div style="width: 200px;height: 200px;background: blue;margin: 100px auto;">我是参照物</div>

        <div style="width: 200px;height: 200px;background: red;border:1px solid black;margin: 100px auto;transform:rotateY(120deg);">哈哈哈哈哈哈哈哈哈哈哈哈哈哈好搞笑啊</div>

   　　<!--是围绕本身在一个给定度数Y轴旋转的元素-->


 </body>

</html>





过渡


1、transition   效果的持续时间




<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title></title>

<style>

div {

    width: 100px;

    height: 100px;

    background: red;

    -webkit-transition: width 2s, height 2s, -webkit-transform 2s;

    transition: width 2s, height 2s, transform 2s;

}

div:hover {

    width: 200px;

    height: 200px;

    -webkit-transform: rotate(180deg);

    transform: rotate(180deg);

}

</style>

</head>

<body>

</body>

</html>






.guo{

            width:100px;

            height:100px;

            background:blue;

            transition:width 2s;

/*transition: property duration timing-function delay;*/

/*transition-property      规定设置过渡效果的 CSS 属性的名称。*/

/*transition-duration    规定完成过渡效果需要多少秒。*/

/*transition-delay    定义过渡效果何时开始。*/

/*transition-timing-function    规定速度效果的速度曲线。*/


      }

        .guo:hover{

            width:300px;

        }

    </style>

<body>

    <div class="xuanzhuan"></div>

    <p class="sand"></p>

    <!-- 3d镶嵌 -->

    <div id="div1">

          <div id="div2">HELLO

              <div id="div3">YELLOW</div>

          </div>

    </div>

    <!-- 过渡 -->






 




  
												


											
css2d 3d的更多相关文章
	

    
						
  1. css-2d,3d，过渡，动画
		
    css2d CSS3 转换可以对元素进行移动.缩放.转动.拉长或拉伸. 2D变换方法: translate()方法,根据左(X轴)和顶部(Y轴)位置给定的参数,从当前元素位置移动 transform: ...
    
		
    2. 
								
  2. css3的3D和2D
		
    css3的3D旋转:rorateX():参数为正值时,盒子是围绕x轴,完成从Y轴正方向到Y轴负方向的旋转,视觉上呈现高度上的变化.rorateY():参数为正值时,盒子是围绕Y轴,完成从X轴正方向到X ...
    
		
    3. 
						
  3. 2D、3D形变
		
    p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 17.0px Monaco; color: #a5b2b9 } span.Apple-tab-span {  ...
    
		
    4. 
						
  4. CSS3 3D立方体效果－transform也不过如此
		
    CSS3系列已经学习了一段时间了,第一篇文章写了一些css3的奇技淫巧,原文戳这里,还获得了较多网友的支持,在此谢过各位,你们的支持是我写文章最大的动力^_^. 那么这一篇文章呢,主要是通过一个3D立 ...
    
		
    5. 
						
  5. 三分钟学会用 js + css3 打造酷炫3D相册
		
    之前发过该文,后来不知怎么回事不见了,现在重新发一下. 中秋主题的3D旋转相册 如图,这是通过Javascript和css3来实现的.整个案例只有不到80行代码,我希望通过这个案例,让正处于迷茫期的j ...
    
		
    6. 
						
  6. 使用CSS3实现一个3D相册
		
    CSS3系列我已经写过两篇文章,感兴趣的同学可以先看一下CSS3初体验之奇技淫巧,CSS3 3D立方体效果-transform也不过如此 第一篇主要列出了一些常用或经典的CSS3技巧和方法:第二篇是一 ...
    
		
    7. 
						
  7. Android ViewPager打造3D画廊
		
    本文已授权微信公众号:鸿洋(hongyangAndroid)在微信公众号平台原创首发. 网上有很多关于使用Gallery来打造3D画廊的博客,但是在关于Gallery的官方说法中表明: This cl ...
    
		
    8. 
						
  8. 如何在ASP.Net创建各种3D图表
		
    我们都知道,图表在ASP.NET技术中是一种特别受欢迎而又很重要的工具.图表是表示数据的图形,一般含有X和Y两个坐标轴.我们可以用折线,柱状,块状来表示数据.通过图表控件,我们即能表示数据又能比较各种 ...
    
		
    9. 
						
  9. 现代3D图形编程学习-基础简介(3)-什么是opengl (译)
		
    本书系列 现代3D图形编程学习 OpenGL是什么 在我们编写openGL程序之前,我们首先需要知道什么是OpenGL. 将OpenGL作为一个API OpenGL 通常被认为是应用程序接口(API) ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. Android App专项测试(压力测试)
			
    转载https://blog.csdn.net/qq_29794757/article/details/64160303 转载https://blog.csdn.net/xuejiaodream/ar ...
    
			
    2. 
						
  2. Java中ArrayList的删除元素总结
			
    Java中循环遍历元素,一般有for循环遍历,foreach循环遍历,iterator遍历. 先定义一个List对象 List<String> list = new ArrayList&l ...
    
			
    3. 
						
  3. mongodb 多表查询
			
    今天有一个业务涉及到mongodb的多表查询,大体记录下语句结构 db.table_a.aggregate([ {$lookup:{from:"table_b",localFiel ...
    
			
    4. 
						
  4. PHP通过身份证号码获取性别、出生日期、年龄等信息
			
    $sex = substr($idcard, (strlen($idcard)==18 ? -2 : -1), 1) % 2 ? '1' : '2'; //18位身份证取性别,倒数第二位奇数是男,偶数 ...
    
			
    5. 
						
  5. Django项目创建
			
    一.创建方式 1.命令行创建: 2.pycharm创建项目: 二.创建MySQL数据库 三.修改配置文件链接数据库 修改python连接数据库方式 四.Django配置 1.添加app项目 2.修改h ...
    
			
    6. 
						
  6. Innodb引擎中Count（*）
			
    select count(*)是MySQL中用于统计记录行数最常用的方法,count方法可以返回表内精确的行数. 在某些索引下是好事,但是如果表中有主键,count(*)的速度就会很慢,特别在千万记录 ...
    
			
    7. 
						
  7. Linux命令:typeset
			
    语法 typeset [-afFgrxilnrtux] [-p] [name[=value] …] 说明 declare的同义词,提供它只是为了保持和ksh兼容.
    
			
    8. 
						
  8. Django系列之web应用与http协议
			
    第一节:最简单的web应用程序 web应用程序指供浏览器访问的程序,通常也简称为web应用.应用程序有两种模式C/S,B/S.C/S是客户端/服务器程序.也就是说这类程序一般独立运行.而B/S就是浏览 ...
    
			
    9. 
						
  9. java script简介
			
    JavaScript一种直译式脚本语言,是一种动态类型.弱类型.基于原型的语言,内置支持类型.它的解释器被称为JavaScript引擎,为浏览器的一部分,广泛用于客户端的脚本语言,最早是在HTML(标 ...
    
			
    10. 
						
  10. 浏览器登录EBS系统遇到问题总结
			
    1.可以登录EBS系统,但是职责位置为空白 这是兼容性视图问题,将ERP域名加入兼容性视图列表即可. 加入即可: 2.可以登录EBS系统,但是职责位置显示 “undefined” 这也是兼容性视图问题 ...
    
			
    11.