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

随机推荐

简述HTTP协议
引言 HTTP协议是Hyper Text Transfer Protocol(超文本传输协议)的缩写,是用于从万维网服务器传输超文本到本地浏览器的传送协议.HTTP 是基于 TCP/IP 协议通信协议 ...
MySQL之慢查询日志和通用查询
MySQL中的日志包括:错误日志.二进制日志.通用查询日志.慢查询日志等等.这里主要介绍下比较常用的两个功能:通用查询日志和慢查询日志. 1.通用查询日志:记录建立的客户端连接和执行的语句. 2.慢查 ...
K8S入门学习
一.k8s是个什么鬼? k8s全名:kubernetes 它是一个工具,在linux上管理应用生命周期的一个工具. 二.k8s有什么卵用? 1.当你把项目部署到服务器集群上,一台服务器挂了,k8s它可 ...
Python创建virtualenv（虚拟环境）方法
本文目录一前言二通过virtualenv软件创建三在pycharm下创建新建项目四已有项目使用和创建虚拟环境五参数说明一前言需求: --公司之有一台服务器 ...
Hbase表结构模型
python爬虫之正则表达式
一.简介正则表达式,又称正规表示式.正规表示法.正规表达式.规则表达式.常规表示法(英语:Regular Expression,在代码中常简写为regex.regexp或RE),计算机科学的一个概念 ...
python之路--内置函数03
一 . 正则表达式匹配字符串元字符 . 除了换行 \w 数字, 字母, 下划线 \d 数字 \s 空白符 \n \t \b 单词的边界 \W 非xxx \D \S [ ] 字符组 or的关系 [^ ...
GitHub创建仓库，并与git本地仓库关联
登录后头像右上角点击: 起名再create 后会跳转到下面页面: 先在git上复制执行第一条指令,创建一个readme文档然后再用第二条初始化仓库第三步将readme文档添加至暂存区然后提交一 ...
nginx worker_processes 配置
搜索到原作者的话:As a general rule you need the only worker with large number ofworker_connections, say 10,0 ...
一、zipkin
zipkin是Twitter基于google的分布式监控系统Dapper(论文)的开发源实现,zipkin用于跟踪分布式服务之间的应用数据链路(具体就是收集微服务之间的调用情况,然后处理调用之间数据延 ...

CSS之2D转换模块