html的过渡、平移、旋转与3d属性
一、过渡属性
过渡属性介绍：
css3的transition允许css的属性值在一定的时间区间内平滑地过渡。这种效果可以在鼠标单击、获得焦点、被点击或对元素任何改变中触发，并圆滑地以动画效果改变CSS的属性值
注意点：
过渡效果对display:none;和display:blok;不起作用
语法：
过渡属性分写形式：
transition-property：检索或设置对象中的参与过渡的属性
transition-duration：检索或设置对象过渡的持续时间
transition-delay：检索或设置对象延迟过渡的时间
transition-timing-function：检索或设置对象中过渡的动画类型
简写：
transition:all(全部或所有)/具体属性值 运动时间s/ms 延迟时间s/ms 动画类型;
动画类型示例图:
代码示例:
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documenttitle>
<style>
div{
width: 200px;
height: 50px;
background-color: hotpink;
/* 需要参与过渡的属性 */
/* transition-property: width, height, background-color; */
transition-property: all;
/* 过渡时间 */
transition-duration: 1s;
/* 延迟时间 */
transition-delay: 2s;
/* 检索或设置对象中过渡的动画类型 */
transition-timing-function：ease-in;
/* 简写形式 */
transition: all 1s 2s ease-in;
}
div:hover{
width: 50px;
height: 200px;
background-color: greenyellow;
}
style>
head>
<body>
<div>div>
body>
html>
二、2D属性
transform 该属性允许我们对元素进行旋转、缩放、移动。
位移语法:
1、translate()
将元素向指定的方向移动，类似于position中的relative。
如：transform: translate(100px, 0px);
第一个参数:水平方向
第二个参数:垂直方向
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documenttitle>
<style>
div{
width: 200px;
height: 200px;
background-color: orange;
/*
transform
+ 可以允许咱们对元素进行位移、旋转、缩放操作
+ 注意点：
=> 两个相同的transform之间会进行覆盖
位移轴方向
+ X轴表示左右
+ Y轴表示上下
+ Z轴表示前后
*/
/* transform: translateX(100px);
transform: translateY(100px); */
/* transform: translateX(100px) translateY(200px); */
transform: translate(100px, 200px);
}
style>
head>
<body>
<div>div>
body>
html>
缩放属性语法:
2、scale()
让元素根据中心原点对对象进行缩放。默认的值1。因此0.01到0.99之间的任何值，使一个元素缩小；而任何大于或等于1.01的值，让元素显得更大。
如：transform: scale(0.5, 0.5);
第一个参数:水平方向
第二个参数:垂直方向
注意点:
如果取值是1, 代表不变
如果取值大于1, 代表需要放大
如果取值小于1, 代表需要缩小
如果水平和垂直缩放都一样, 那么可以简写为一个参数
transform: scale(1.5);
缩放使用如下：
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documenttitle>
<style>
div{
width: 200px;
height: 200px;
background-color: orange;
margin: 50px auto;
/*
scale
+ 表示的是缩放（放大、缩小）
+ 值
=> 如果值是1表示不进行缩放，但是不能给0
=> 如果值是大于1的表示放大，值是小于1的表示缩小
=> 可以写小数，小数前面的零可以省略
=> 如果是1个值的时候表示的是一起放大或者缩小
+ X轴缩放，缩放的是宽度
+ Y轴缩放，缩放的是高度
+ Z轴缩放，缩放的是厚度（深度）
*/
/* transform: scaleX(2) scaleY(2); */
/* transform: scale(2, .5); */
transform: scale(.5);
}
style>
head>
<body>
<div>div>
body>
html>
旋转语法：
3、rotate()
旋转rotate()通过指定的角度参数对元素根据对象原点指定一个2D旋转。它主要在二维空间内进行操作，接受一个角度值，用来指定旋转的幅度。如果这个值为正值，元素相对原点中心顺时针旋转；如果这个值为负值，元素相对原点中心逆时针旋转。
注意点:
1.如果需要进行多个转换, 那么用空格隔开
2.2D的转换模块会修改元素的坐标系, 所以旋转之后再平移就不是水平平移的 如：transform: rotate(45deg);
translate(100px, 0px) scale(1.5, 1.5);
rotateX() 方法，元素围绕其 X 轴以给定的度数进行旋转
rotateY() 方法，元素围绕其 Y 轴以给定的度数进行旋转
rotateZ() 方法，元素围绕其 Z轴以给定的度数进行旋转，默认就是Z轴旋转。
旋转和景深使用如下：
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documenttitle>
<style>
*{
margin: 0;
padding: 0;
}
ul{
width: 200px;
height: 300px;
margin: 50px auto;
}
ul li{
width: 200px;
height: 300px;
border: 1px solid;
margin: 60px 0;
list-style: none;
/* 透视（景深）属性，指的是近大远小的效果 */
/* perspective: 500px; */
}
/*
rotate
+ 表示旋转
+ deg表示度数
+ X轴旋转，表示的是上下
+ Y轴旋转，表示的是左右
+ Z轴旋转，表示的是顺时针或者逆时针
2D空间
+ 二维空间，就是平面空间，物体是没有立体感的
3D空间
+ 三维空间，就是立体空间
*/
ul li img{
width: 200px;
height: 300px;
}
ul li:nth-child(1) img{
/* 透视属性可以设置在子元素上面，但是不推荐 */
/* transform:perspective(500px) rotateX(45deg); */
transform:rotateX(45deg);
}
ul li:nth-child(2) img{
transform: rotateY(45deg);
}
ul li:nth-child(3) img{
transform: rotateZ(45deg);
}
style>
head>
<body>
<ul>
<li><img src="img/2.jpg" alt="">li>
<li><img src="img/3.jpg" alt="">li>
<li><img src="img/2.jpg" alt="">li>
ul>
body>
html>
变形原点：
transform-origin: top left;
控制2d效果的产生位置
变形原点使用如下：
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documenttitle>
<style>
*{
margin: 0;
padding: 0;
}
.box{
width: 200px;
height: 200px;
background-color: orange;
margin: 50px auto;
perspective: 500px;
}
.box div{
width: 100px;
height: 100px;
background-color: greenyellow;
/* 变形原点，默认旋转都是在元素的中心位置 */
/* transform-origin: top left; */
transform-origin: 50px 70px;
transform: rotateX(0deg) rotateY(0deg);
}
style>
head>
<body>
<div class="box">
<div>div>
div>
body>
html>
景深属性语法:
perspective: 数值；透视属性：近大远小
注意点：一定要注意, 透视属性必须添加到需要呈现近大远小效果的元素的父元素上面
三、translate3d
1)什么是3d的场景呢？
2d场景，在屏幕上水平和垂直的交叉线x轴和y轴
3d场景，在垂直于屏幕的方法，相对于2d多出个z轴
Z轴：靠近屏幕的方向是正向，远离屏幕的方向是反向
下图为3d场景坐标图
2)transform-style属性
ransform-style属性是3D空间一个重要属性，指定嵌套元素如何在3D空间中呈现。
他主要有两个属性值：flat和preserve-3d
- translate3d位移属性
3D位移
CSS3中的3D位移主要包括:
translateZ()
translate3d(值1，值2，值3)两个功能函数；
值1：代表横向坐标位移向量的长度；
值2：代表纵向坐标位移向量的长度；
值3：代表Z轴位移向量的长度。此值不能是一个百分比值，如果取值为百分比值，将会认为无效值。
4)rotate3d旋转属性
3D旋转
CSS3中的3D旋转主要包括:
rotateX()
rotateY()
rotateZ()
rotate3d(1,1,0,4deg)四个功能函数；
4个参数，前三个，对应x,y,z 轴，是标示你是否希望沿着该轴旋转，是为1，不是为0，最后一个标示旋转的角度。
3d旋转属性使用如下：
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documenttitle>
<style>
body{
perspective: 500px;
}
div{
width: 200px;
height: 200px;
background-color: hotpink;
margin: 200px auto;
/*
值
+ 值1，表示X轴
+ 值2，表示Y轴
+ 值3，表示Z轴
+ 值4，表示度数
+ 前面三个值都是用1或者0表示，1表示沿着该轴进行旋转，0表示不旋转
*/
transform: rotate3d(1, 1, 1, 45deg);
}
style>
head>
<body>
<div>div>
body>
html>
5)scaleZ缩放属性:
CSS3中的3D缩放主要包括:
scaleZ()；
6)景深属性：
生活中的3d 区别于2d的地方
近大远小 景深
程序中实现的方法 perspective 元素距离 视线的距离（物体和眼睛的距离越小，近大远小的效果越明显）
perspective: 1200px;(加在父元素上)
transform:perspective(1200px) （在子元素中使用）
注意点：
a、两个都设置会发生冲突，建议只设置父元素，通常的数值在900-1200之间
2、如果当你的视线距离物体足够远的时候，基本上就不会有近大远小的感觉
四、斜切
transform: skewY()
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documenttitle>
<style>
div{
width: 200px;
height: 200px;
background-color: hotpink;
margin: 200px auto;
/* transform: skewX(30deg); */
transform: skewY(30deg);
}
style>
head>
<body>
<div>div>
body>
html>