CSS 2D转换模块

transform

参考W3手册

transform 属性向元素应用从2D 或3D转换。该属性允许我们对元素进行旋转、缩放、移动或者倾斜。

  • 格式：

    transform: none|transform-functions;
  • 常用取值：
    • 旋转 rotate

      transform: rotate(45deg);
      
/*其中deg是单位, 代表多少度*/
    • 平移 translate 
      transform: translate(100px, 0px);
      
/*
      
第一个参数:水平方向
      
第二个参数:垂直方向
      
*/
    • 缩放 scale 
      transform: scale(1.5);
      
/*transform: scale(0.5, 0.5);*/

/*
      
第一个参数:水平方向
      
第二个参数:垂直方向
      
注意点:
      
如果取值是1, 代表不变
      
如果取值大于1, 代表需要放大
      
如果取值小于1, 代表需要缩小
      
如果水平和垂直缩放都一样, 那么可以简写为一个参数
      
*/
    • 综合转换连写格式 
      transform: rotate(45deg) translate(100px, 0px) scale(1.5, 1.5);
      
/*
      
注意点:
      
1.如果需要进行多个转换, 那么用空格隔开
      
2.2D的转换模块会修改元素的坐标系, 所以旋转之后再平移就不是水平平移的
      
*/

默认情况下所有元素都是围绕Z轴进行旋转，如果想围绕哪个轴旋转，那么只需要在rotate后面加上哪个轴即可。如：

transform: rotateZ(45deg);

transform: rotateX(45deg);

transform: rotateY(45deg);

transform-origin

transform-origin 属性用于改变被转换元素的位置

2D转换元素能够改变元素的X和Y轴。3D转换元素还能改变其Z轴

  • 格式：

    transform-origin: left top;
  • 取值： 
    /*具体像素*/
    
transform-origin: 200px 0px;

/*百分比*/
    
transform-origin: 50% 50%;

/*特殊关键字*/
    
transform-origin: left top;

默认情况下所有的元素都是以自己的中心点作为参考来旋转的, 我们可以通过形变中心点属性来修改它的参考点

perspective

perspective 属性定义3D元素距视图的距离，以像素计，该属性允许改变3D元素查看3D元素的视图

当为元素定义perspective属性时，其子元素会获得透视效果，而不是元素本身

  • 格式：

    perspective: number|none;

/*
    
number  元素距离视图的距离，以像素计
    
none    默认值。与0相同。不设置透视
    
*/
  • 注意：perspective 属性只能影响3D转换元素

综合实例一

2D模块转换扑克练习

<!DOCTYPE html>

<html lang="zh-CN">

<head>

    <meta charset="UTF-8">

    <title>2D模块转换扑克练习</title>

    <style>

        *{

            margin: 0;

            padding: 0;

        }

        div{

            width: 310px;

            height: 418px;

            border: 1px solid gold;

            margin: 100px auto;

            background-color: #afcced;

            perspective: 400px;

        }

        div img{

            transition: transform 1.2s;

            transform-origin: center bottom;

        }

        div:hover img{

            transform: rotateX(80deg);

        }

    </style>

</head>

<body>

<div>

    <img src="img/pk.png" alt="">

</div>

</body>

</html>

综合实例二（相片墙）

2D转换模块-照片墙

<!DOCTYPE html>

<html lang="zh-CN">

<head>

    <meta charset="UTF-8">

    <title>2D转换模块-照片墙</title>

    <style>

        *{

            margin: 0;

            padding: 0;

        }

        ul{

            height: 400px;

            margin: 100px auto;

            background-color: cornflowerblue;

            text-align: center;

            border: 1px solid #000;

        }

        ul li{

            list-style: none;

            margin-top: 100px;

            height: 200px;

            width: 150px;

            display: inline-block;

            background-color: red;

            border: 5px solid white;

            transition: transform 1s;

            box-shadow: 2px 2px 2px;

            position: relative;

        }

        ul li:nth-child(1){

            transform: rotate(30deg);

        }

        ul li:nth-child(2){

            transform: rotate(-40deg);

        }

        ul li:nth-child(3){

            transform: rotate(15deg);

        }

        ul li:nth-child(4){

            transform: rotate(60deg);

        }

        ul li:nth-child(5){

            transform: rotate(-25deg);

        }

        ul li:nth-child(6){

            transform: rotate(10deg);

        }

        ul li img{

            width: 150px;

            height: 200px;

        }

        ul li:hover {

            transform: scale(1.6);

            z-index: 999;

        }

    </style>

</head>

<body>

<ul>

    <li><img src="img/1.jpg" alt=""></li>

    <li><img src="img/2.jpg" alt=""></li>

    <li><img src="img/3.jpg" alt=""></li>

    <li><img src="img/4.jpg" alt=""></li>

    <li><img src="img/5.jpg" alt=""></li>

    <li><img src="img/6.jpg" alt=""></li>

</ul>

</body>

</html>

CSS之2D转换模块的更多相关文章

  1. css过渡模块和2d转换模块

    今天,我们一起来研究一下css3中的过渡模块.2d转换模块和3d转换模块 一.过渡模块transition (一)过度模块的三要素: 1.必须要有属性发生变化 2.必须告诉系统哪个属性需要执行过渡效果 ...

  2. CSS学习笔记-2D转换模块

    2D转换模块:    1.旋转        1.1格式:            transform:rotate(45deg);        1.2含义:            表示旋转多少度   ...

  3. CSS中2d转换：transition过渡放在:hover伪类中与应用在整个元素中区别

    css的2d转换十分强大,能够在不使用js的情况下,实现页面的元素与用户之间更多动态的交互,增强用户体验.其中使用最多的就是hover伪类. 1.创建一个页面的div元素: <!DOCTYPE ...

  4. 2D转换模块

    2D转换模块(transform) 1.取值:rotate(45deg)--- 旋转,默认以自己为中心作为参考点来旋转 .translate(100px,0px)--- 平移,第一个参数代表水平方向, ...

  5. HTML连载67-手风琴效果、2D转换模块

    一.手风琴效果 <style> *{ margin:0; padding:0; } ul{ width: 960px; height: 300px; margin:100px auto; ...

  6. CSS动画之转换模块

    2D转换模块:注意点:1.可以类似于过渡模块一样简写,但是这里不是用逗号隔开而是用空格 2.2D的转换模块会修改元素的坐标系,所以旋转之后的平移就不是水平平移 格式:旋转:transform: rot ...

  7. CSS学习笔记-02. 2D转换模块-形变中心点

    简单粗暴,直接上重点:  transform-origin 接下来是代码. 首先 勾勒出 3个重叠的div 接着 给3个div分别添加 transform: rotate . <!DOCTYPE ...

  8. css 2D转换总结

    CSS中2D转换的形式是这样的: 选择器{ transform:转换函数(参数,参数): } 其中transform(是transform 不是transfrom)定义元素的2D或者3D转换: 2D转 ...

  9. CSS 2D转换

    转换是使元素改变形状.尺寸和位置的一种效果.通过 CSS3 转换,我们能够对元素进行移动.缩放.转动.拉长或拉伸,可以大致分为2D转换和3D转换.下面介绍的是2D转换的相关知识点. 首先,CSS中2D ...

随机推荐

  1. Eclipse在写java时的BUG

    要把这个关掉

  2. @Param注解

    关于mybatis的@Param注解和参数 引用 https://www.cnblogs.com/whisper527/p/6568028.html 薇飘意 1,使用@Param注解 当以下面的方式进 ...

  3. 2017 Python最新面试题及答案16道题

    1.Python是如何进行内存管理的? 答:从三个方面来说,一对象的引用计数机制,二垃圾回收机制,三内存池机制 一.对象的引用计数机制 Python内部使用引用计数,来保持追踪内存中的对象,所有对象都 ...

  4. layui 提交表格不验证

    form.on('submit(filter_save)', function (data) { 后面查找发现是提交按钮要放在form里面

  5. JS--操作DOM树

    <ul id="ul1"> <li id="li1">111</li> <li id="li2"& ...

  6. Jenkins+PowerShell持续集成环境搭建(七)构建触发器

    Jenkins 有三种类型的构建触发器,如下图: Build after other projects are built:在其他项目构建后构建: Build periodically:定时构建: P ...

  7. Vue可复用过渡和动态过渡

    前面的话 本文将详细介绍Vue可复用过渡和动态过渡 可复用过渡 过渡可以通过 Vue 的组件系统实现复用.要创建一个可复用过渡组件,需要做的就是将 <transition> 或者 < ...

  8. Nginx 缓存针对打开的文件句柄与原文件信息

    L:108 open_file_cache syntax: open_file_cache off;   open_file_cache max=N[inactive=time](inactive表示 ...

  9. 【转】微信小程序开发之图片等比例缩放 获取屏幕尺寸图片尺寸 自适应

    原文[https://blog.csdn.net/qq_31383345/article/details/53127804] 早上在论坛上看到有人写了关于图片等比例缩放的文章,只是判断了图片宽是否大于 ...

  10. Codeforces Round #507 Div. 1

    D:类似于noip2018d1t3,子树内的链应该贪心的尽量合并而不是拆开.则设f[i]为i子树内满足选的链尽量多的情况下根所在的链的最长长度即可.于是可以线性对某个k求得答案. 注意到长度为k的链不 ...