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 ...

随机推荐

《Effective C++》让自己习惯C++：条款1-条款4
条款1:视C++为一个语言联邦可以将C++分为4个层次: 1.C:C++实在C语言的基础上发展而来的. 2:Object-Oriented C++:C++面向对象. 3:Template C++:C ...
vue上传图片到服务器
https://blog.csdn.net/qq_29712995/article/details/78839093(copy) HTML代码: <input accept="imag ...
极验3.0滑动拼图验证的使用--java
[ 前言: 在登录其他网站的时候,看到有个滑动拼图的验证觉得挺好玩的,以前做一个图片验证的小demo,现在发现很多网站都开始流行滑动拼图的验证了,今天也想自己动手来弄一个. 废话不多说,开始撸起来! ...
“耐撕”团队 2016.03.31 站立会议
1. 时间: 19:30--19:50 共计20分钟. 2. 成员: Z 郑蕊 * 组长 (博客:http://www.cnblogs.com/zhengrui0452/), P 濮成林(博客:ht ...
docker 操作镜像的基本操作
以安装mysql为例 1.拉取镜像 docker pull mysql 错误的启动 [root@localhost ~]# docker run --name mysql01 -d mysql 42f ...
flask Django保存session区别
'''Django中,session保存在服务端的数据库中,数据库中保存请求用户的所有数据,服务端数据中{'随机字符串':加密后的客户相关信息}请求完成后,把随机字符串作为值,返回给客户端,保存在客户 ...
SpringBoot之显示本地图片范例
controller // 扫描指定目录下的图片进行展示 @RequestMapping("/showPics") public ModelAndView showPics(Mod ...
js4
数组的解构赋值: 位置对象的解构赋值: 名称 // {}在解构赋值的时候,不能出现在一行的最前面,否则js解析器会把他当成一个代码块,加()({a, b} = obj),告诉他这个仅仅是一个解构语句 ...
Python——tkinter操作
一.创建单选框 form tkinter import * #创建窗口体 window = tk() #初始化组合件绑定 w1 = IntVar() #设置初始选择项1 w1.set(1) def O ...
Mvc校验用户没有登录就跳转的实现
看字面意思很简单,就是判断用户是否登录了,如果没有登录就跳转到登陆页面. 没错,主要代码如下(这里就不写判断登录了,直接跳转) 首先在控制器中新建一个BaseController public cla ...

CSS之2D转换模块