CSS 2D转换模块

transform

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转换模块的更多相关文章

css过渡模块和2d转换模块
今天,我们一起来研究一下css3中的过渡模块.2d转换模块和3d转换模块一.过渡模块transition (一)过度模块的三要素: 1.必须要有属性发生变化 2.必须告诉系统哪个属性需要执行过渡效果 ...
CSS学习笔记-2D转换模块
2D转换模块: 1.旋转 1.1格式: transform:rotate(45deg); 1.2含义: 表示旋转多少度 ...
CSS中2d转换：transition过渡放在:hover伪类中与应用在整个元素中区别
css的2d转换十分强大,能够在不使用js的情况下,实现页面的元素与用户之间更多动态的交互,增强用户体验.其中使用最多的就是hover伪类. 1.创建一个页面的div元素: <!DOCTYPE ...
2D转换模块
2D转换模块(transform) 1.取值:rotate(45deg)--- 旋转,默认以自己为中心作为参考点来旋转 .translate(100px,0px)--- 平移,第一个参数代表水平方向, ...
HTML连载67-手风琴效果、2D转换模块
一.手风琴效果 <style> *{ margin:0; padding:0; } ul{ width: 960px; height: 300px; margin:100px auto; ...
CSS动画之转换模块
2D转换模块:注意点:1.可以类似于过渡模块一样简写,但是这里不是用逗号隔开而是用空格 2.2D的转换模块会修改元素的坐标系,所以旋转之后的平移就不是水平平移格式:旋转:transform: rot ...
CSS学习笔记-02. 2D转换模块-形变中心点
简单粗暴,直接上重点: transform-origin 接下来是代码. 首先勾勒出 3个重叠的div 接着给3个div分别添加 transform: rotate . <!DOCTYPE ...
css 2D转换总结
CSS中2D转换的形式是这样的: 选择器{ transform:转换函数(参数,参数): } 其中transform(是transform 不是transfrom)定义元素的2D或者3D转换: 2D转 ...
CSS 2D转换
转换是使元素改变形状.尺寸和位置的一种效果.通过 CSS3 转换,我们能够对元素进行移动.缩放.转动.拉长或拉伸,可以大致分为2D转换和3D转换.下面介绍的是2D转换的相关知识点. 首先,CSS中2D ...

随机推荐

fork分支与源分支同步代码
最进软件工程课程要团队开发做个网站项目,于是我在团队里推了使用github这种网站来协同开发,但是出现了个问题:fork后的代码无法与源分支代码同步,导致fork分支的代码只有自己写的那部分,而不是 ...
day 7-6 多线程及开启方式
一. 什么是线程线程:顾名思义,就是一条流水线工作的过程,一条流水线必须属于一个车间,一个车间的工作过程是一个进程所以,进程只是用来把资源集中到一起(进程只是一个资源单位,或者说资源集合),而线程 ...
动态SQL3
Oracle的批量操作 Oracle不支持VALUES(),(),()这种方式,所以不能用上一节所讲的方法. 有时候业务会包含很多次数据库操作,为了减少数据库连接,我们会选择一次提交大量sql, 这时 ...
取消 Vue 中格式编译警告
使用VS Code在学习 Vue 的过程中,博主是在2.0之后开始学习的,在写项目的时候发现控制台经常会报一大堆的警告,都是关于格式的,有时候少空格,有时候多空格,不胜其烦,出现这个问题是因为在初始化 ...
js中获取当前项目名等
实际上通过window.location可以获取很多跟资源路径相关的信息,需要用到的时候直接通过浏览器调试可以查看window.location的一些属性
MySQL中KEY、PRIMARY KEY、UNIQUE KEY、INDEX 的区别
参考:MySQL中KEY.PRIMARY KEY.UNIQUE KEY.INDEX 的区别对于题目中提出的问题,可以拆分来一步步解决.在 MySQL 中 KEY 和 INDEX 是同义.那这个问题就 ...
移动APP用例设计中的关键点(转载)
http://www.51testing.com/html/52/n-4421752.html 在测试工作中我们需要不断的总结和储备自己的知识和经验,譬如具备特定属性.环境以及场景,如:PC,手机,智 ...
java 处理上传exl数据并导入数据库
思路:处理上传exl表格,并读取文件,数据,讲数据放去集合,循环插入数据库. 重点,读取文件时需要读数据,格式和数据是否正确,(因为只是把整条路打通,所以这块没有细弄): 项目使用ssm框架, str ...
【python练习题】程序7
#题目:将一个列表的数据复制到另一个列表中. l = [1,2,3,4,5,6,7,8] m = [] m = l[:] print (m)
openblas下载安装编译
编译好的库: https://github.com/JuliaLinearAlgebra/OpenBLASBuilder/releases 源码编译下载:https://github.com/xia ...

CSS之2D转换模块