本文详细介绍了CSS中3D转换的各种属性及其用法，包括3D位移、3D旋转、3D缩放及如何正确设置perspective属性实现透视效果。此外，还深入探讨了CSS过渡的基本概念和具体应用，包括过渡属性、过渡时间、过渡函数和过渡延迟等关键配置。
<!--
3D转换
perspective属性用于定义3D元素距离视图的间距，为元素定义该属性时，其子元素会获得透视效果，而不是元素本身，只影响3D转换元素，注意浏览器的兼容。
1、3D位移
3D位移可以改变元素在Z轴的位置，语法为：
transform:translateZ(value)/translate3d(x,y,z);
2、3D旋转
3D旋转主要包含rotateX(deg)/rotateY(deg)/rotateZ(deg)
3、3D缩放
3D缩放主要包含scaleZ(z)和scale3d(x,y,z)，注意，单独使用3D缩放函数时并没有什么效果，它需要跟别的转换函数一起使用.
过渡
1、什么是过渡
过渡是指CSS属性的值在一段时间内平滑的过渡。
2、使用过渡
使用过渡的四个要素：
-指定过渡的属性，如background
-设置过渡的时间，单位以秒或毫秒计
-设置过渡函数，也就是过渡方式、速度等
-设置过渡延迟时间
触发过渡，可以通过用户的行为，比如点击，悬停等
3、过渡属性
transition-property，该属性用于规定哪个CSS属性使用过渡效果，当指定属性的值发生改变时，过渡效果开始，其语法为：
transition-property:none/all/具体的属性名;
可以设置过渡的属性有：颜色属性、取值为数值的属性、转换属性、渐变属性、visibility和阴影属性；
4、过渡时间
transition-duration，该属性用于设置过渡的时间，也就是从开始到结束的总花费时间，以秒或毫秒为单位，其语法为：
transition-duration:s/ms;注意，想要有过渡效果，必须要设置该属性，因为默认值是0
5、过渡函数
transition-timing-function，该属性用于设置过渡函数，也就是过渡效果的速度曲线，取值可以为预设函数，其语法为：
transition-timing-function:function;
function可取值为：
-ease，默认值，慢速开始，快速变化，慢速结束
-linear，以相同的速度开始和结束
-ease-in，慢速开始，有加速效果
-ease-out，慢速结束，有减速效果
-ease-in-out，以慢速开始和结束，先加速再减速
6、过渡延迟
transition-delay，该属性规定过渡效果何时开始，即当元素属性值改变后多长时间开始执行过渡效果，以秒或毫秒为单位，语法为：
transition-delay:s/ms;默认是0；
-->
<html>
<head>
<title></title>
<style type="text/css">
#div1{
width: 400px;
height: 100px;
margin-left: 80px;
border: 1px solid black;
-webkit-perspective:100;
perspective:120;
}
#div2{
width: 100px;
height: 100px;
background: gray;
border: 1px solid black;
margin-left: 10px;
margin-top: 10px;
/*-webkit-transform:translateZ(10px);*/
/*transform:translate3d(60px,10px,20px);*/
/*transform:rotateX(45deg);*/
/*transform:rotateY(30deg);*/
transform:scaleZ(5) rotateX(30deg) ;
}
#div3{
width: 200px;
height: 200px;
border: 1px solid black;
transition:background 3s linear 0s;
}
#div3:hover{
background: red;
}
div{
width: 100px;
height: 30px;
border: 1px solid black;
background: gray;
transition-property:width;
transition-duration:2s;
}
.d1{
transition-delay:4s;
transition-timing-function:ease;
}
.d2{
transition-timing-function:linear;
}
.d3{
transition-timing-function:ease-in;
}
.d4{
transition-timing-function:ease-out;
}
.d5{
transition-timing-function:ease-in-out;
}
div:hover{
width: 200px;
}
</style>
</head>
<body>
<div id="div1">
<div id="div2"></div>
</div>
<div id="div3">
</div>
<div class="d1"></div>
<div class="d2"></div>
<div class="d3"></div>
<div class="d4"></div>
<div class="d5"></div>
<div class="d6"></div>
</body>
</html>
3D转换
perspective属性用于定义3D元素距离视图的间距，为元素定义该属性时，其子元素会获得透视效果，而不是元素本身，只影响3D转换元素，注意浏览器的兼容。
1、3D位移
3D位移可以改变元素在Z轴的位置，语法为：
transform:translateZ(value)/translate3d(x,y,z);
2、3D旋转
3D旋转主要包含rotateX(deg)/rotateY(deg)/rotateZ(deg)
3、3D缩放
3D缩放主要包含scaleZ(z)和scale3d(x,y,z)，注意，单独使用3D缩放函数时并没有什么效果，它需要跟别的转换函数一起使用.
过渡
1、什么是过渡
过渡是指CSS属性的值在一段时间内平滑的过渡。
2、使用过渡
使用过渡的四个要素：
-指定过渡的属性，如background
-设置过渡的时间，单位以秒或毫秒计
-设置过渡函数，也就是过渡方式、速度等
-设置过渡延迟时间
触发过渡，可以通过用户的行为，比如点击，悬停等
3、过渡属性
transition-property，该属性用于规定哪个CSS属性使用过渡效果，当指定属性的值发生改变时，过渡效果开始，其语法为：
transition-property:none/all/具体的属性名;
可以设置过渡的属性有：颜色属性、取值为数值的属性、转换属性、渐变属性、visibility和阴影属性；
4、过渡时间
transition-duration，该属性用于设置过渡的时间，也就是从开始到结束的总花费时间，以秒或毫秒为单位，其语法为：
transition-duration:s/ms;注意，想要有过渡效果，必须要设置该属性，因为默认值是0
5、过渡函数
transition-timing-function，该属性用于设置过渡函数，也就是过渡效果的速度曲线，取值可以为预设函数，其语法为：
transition-timing-function:function;
function可取值为：
-ease，默认值，慢速开始，快速变化，慢速结束
-linear，以相同的速度开始和结束
-ease-in，慢速开始，有加速效果
-ease-out，慢速结束，有减速效果
-ease-in-out，以慢速开始和结束，先加速再减速
6、过渡延迟
transition-delay，该属性规定过渡效果何时开始，即当元素属性值改变后多长时间开始执行过渡效果，以秒或毫秒为单位，语法为：
transition-delay:s/ms;默认是0；
-->
<html>
<head>
<title></title>
<style type="text/css">
#div1{
width: 400px;
height: 100px;
margin-left: 80px;
border: 1px solid black;
-webkit-perspective:100;
perspective:120;
}
#div2{
width: 100px;
height: 100px;
background: gray;
border: 1px solid black;
margin-left: 10px;
margin-top: 10px;
/*-webkit-transform:translateZ(10px);*/
/*transform:translate3d(60px,10px,20px);*/
/*transform:rotateX(45deg);*/
/*transform:rotateY(30deg);*/
transform:scaleZ(5) rotateX(30deg) ;
}
#div3{
width: 200px;
height: 200px;
border: 1px solid black;
transition:background 3s linear 0s;
}
#div3:hover{
background: red;
}
div{
width: 100px;
height: 30px;
border: 1px solid black;
background: gray;
transition-property:width;
transition-duration:2s;
}
.d1{
transition-delay:4s;
transition-timing-function:ease;
}
.d2{
transition-timing-function:linear;
}
.d3{
transition-timing-function:ease-in;
}
.d4{
transition-timing-function:ease-out;
}
.d5{
transition-timing-function:ease-in-out;
}
div:hover{
width: 200px;
}
</style>
</head>
<body>
<div id="div1">
<div id="div2"></div>
</div>
<div id="div3">
</div>
<div class="d1"></div>
<div class="d2"></div>
<div class="d3"></div>
<div class="d4"></div>
<div class="d5"></div>
<div class="d6"></div>
</body>
</html>
扫一扫
20
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
