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. 三、taro路由及设计稿及尺寸单位

    一.路由配置 路由配置跟小程序一样,在入口文件的 config 配置中指定好 pages 通过taro API 跳转,详见导航 // 跳转到目的页面,打开新页面 Taro.navigateTo({ u ...

  2. jdk下载及环境变量配置

    一.下载 下载链接 二.环境变量:

  3. Velocity之初印象

    Velocity 模板引擎介绍 在现今的软件开发过程中,软件开发人员将更多的精力投入在了重复的相似劳动中.特别是在如今特别流行的 MVC 架构模式中,软件各个层次的功能更加独立,同时代码的相似度也更加 ...

  4. 如何让pl/sql developer记住密码，实现快速登录

    前两天,有同事使用plsql的时候,切换数据库的时候需要不断的重复输入密码,这样太麻烦了. 下面,我这里说下如何的实现plsql不需要输入密码就能快速登录的方法: 1.一开始登录,首先像往常那样输入密 ...

  5. 关于vagrant一个虚拟机搭建多个项目配置（总结）

    问题1:执行vagrant status命令,报错,没有找到命令,翻译:“vargrant bash命令没有找到.” 解答:因为在/home目录中,所有无法执行该命令,需要切换到外部进行执行 问题2: ...

  6. 协程和异步io

    一. 并发.并行.同步.异步.阻塞.非阻塞 1.并发:是指一个时间段中有几个程序都处于已启动运行到运行完毕之间,且这几个程序都是在同一个处理机(CPU)上运行,但任一个时刻点上只有一个程序在处理机上运 ...

  7. Sql server 经典常用函数

    ..STUFF()用另一子串替换字符串指定位置.长度的子串.STUFF (<character_expression1>, <start_ position>, <len ...

  8. Directory of X:\EFI\Microsoft\Boot

    Directory of X:\EFI\Microsoft\Boot 2017/06/21 15:14 <DIR> . 2017/06/21 15:14 <DIR> .. 20 ...

  9. 使用cmd命令行窗口操作SqlServer

    本文主要介绍使用windows下的使用cmd命令行窗口操作Sqlserver, 首先我们可以运行 osql  ?/   ,这样就把所有可以通过CMD命令行操作sqlserver的命令显示出来 (有图有 ...

  10. Visual Studio for Mac中的ASP.NET Core

    所以你们都听到了#Build 2017的消息,Mac上的Visual Studio已经被完全发布,是一般的.为了庆祝这个版本,我将在我的Mac上写几篇关于构建一些不同的.net应用的帖子. 正如你已经 ...