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. css3的3D和2D

    css3的3D旋转:rorateX():参数为正值时,盒子是围绕x轴,完成从Y轴正方向到Y轴负方向的旋转,视觉上呈现高度上的变化.rorateY():参数为正值时,盒子是围绕Y轴,完成从X轴正方向到X ...

  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. CSS3 3D立方体效果-transform也不过如此

    CSS3系列已经学习了一段时间了,第一篇文章写了一些css3的奇技淫巧,原文戳这里,还获得了较多网友的支持,在此谢过各位,你们的支持是我写文章最大的动力^_^. 那么这一篇文章呢,主要是通过一个3D立 ...

  5. 三分钟学会用 js + css3 打造酷炫3D相册

    之前发过该文,后来不知怎么回事不见了,现在重新发一下. 中秋主题的3D旋转相册 如图,这是通过Javascript和css3来实现的.整个案例只有不到80行代码,我希望通过这个案例,让正处于迷茫期的j ...

  6. 使用CSS3实现一个3D相册

    CSS3系列我已经写过两篇文章,感兴趣的同学可以先看一下CSS3初体验之奇技淫巧,CSS3 3D立方体效果-transform也不过如此 第一篇主要列出了一些常用或经典的CSS3技巧和方法:第二篇是一 ...

  7. Android ViewPager打造3D画廊

    本文已授权微信公众号:鸿洋(hongyangAndroid)在微信公众号平台原创首发. 网上有很多关于使用Gallery来打造3D画廊的博客,但是在关于Gallery的官方说法中表明: This cl ...

  8. 如何在ASP.Net创建各种3D图表

    我们都知道,图表在ASP.NET技术中是一种特别受欢迎而又很重要的工具.图表是表示数据的图形,一般含有X和Y两个坐标轴.我们可以用折线,柱状,块状来表示数据.通过图表控件,我们即能表示数据又能比较各种 ...

  9. 现代3D图形编程学习-基础简介(3)-什么是opengl (译)

    本书系列 现代3D图形编程学习 OpenGL是什么 在我们编写openGL程序之前,我们首先需要知道什么是OpenGL. 将OpenGL作为一个API OpenGL 通常被认为是应用程序接口(API) ...

随机推荐

  1. wcf_first

    WCF包括3部分:client(需要连接到哪里,需要调用什么),service(宿主,及其消息的公开,地址的公开),wcf服务库(提供契约名称,及其怎么干) 步骤: 1.新建wcf库,其中提供一个契约 ...

  2. mysql 函数获取子节点

    DELIMITER $$ USE `topsale`$$ DROP FUNCTION IF EXISTS `getShopIdByUserId`$$ CREATE DEFINER=`root`@`%` ...

  3. OrderBy排序和IComparer的使用

    https://www.cnblogs.com/May-day/p/7490334.html 一,OrderBy排序在MDSN中有两种使用方法,如下 1>第一种方法的使用,就是根据某个字段排序, ...

  4. Axis2 服务器端抛出ServiceClass object does not implement问题解决方法

    在用eclipse配合Axis2进行开发的时候,编译通过,启动tomcat也顺利,但是就是在调用服务器端的服务时,会抛出: The ServiceClass object does not imple ...

  5. Android 获取View在屏幕中的位置【转】

    Android 获取View在屏幕中的位置 https://blog.csdn.net/lonely_fireworks/article/details/7849643

  6. 牛客小白月赛13 小A的最短路(lca+RMQ)

    链接:https://ac.nowcoder.com/acm/contest/549/F来源:牛客网 题目描述 小A这次来到一个景区去旅游,景区里面有N个景点,景点之间有N-1条路径.小A从当前的一个 ...

  7. jQuery插件的一些想法

    之前在用ant-design和MUI的时候是一个系统的插件,应有尽有,当然jQuery也有系统性的插件,最近的项目没有用,所以一些需要插件的东西,需要哪种,找哪种,然后再引入项目中,首先百度搜索这类插 ...

  8. 安装jdk设置环境变量(win10)

    jdk地址: (懒得去官网找,就这个吧,反正也是玩玩) 没标的都是下一步哈 配置环境变量: 1. 新建 JAVA_HOME 值为 F:\java\jdk 安装的位置(第三张图 的那个路径) 2. 新建 ...

  9. kubernetes + istio进行流量管理

    实验目的: 本文介绍如何通过istio实现域名访问k8s部署的nginx服务 前提: 已经安装了kubernetes的服务器 了解 kubernetes 基本命令如何使用 (kubectl creat ...

  10. sonar之阿里巴巴java规则(p3c)

    今天为了打包生成sonar-p3c-pdm插件,折腾了半天.sonar版本v6.7.6,p3c源码地址https://gitee.com/jasonlong10/sonar-p3c-pmd-plugi ...