过渡及2D与3D转换

一.过渡

什么是过渡（transition）？

过渡（transition）是元素从一种样式逐渐改变为另一种的效果。

1.要实现这一点，必须规定两项内容：

a.规定您希望把效果添加到哪个CSS属性上 ；  
 b.规定效果的时长 。
格式：transition: width/(all) 2s;(注：当只需要width时就直接写width，如果需要过渡所有元素就可以使用all)   
注：如果时长未规定，则不会有过渡效果，因为默认值是 0。

2.效果开始于指定的CSS属性改变值时。CSS属性改变的典型时间是鼠标指针位于元素上时：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .main{
            width: 500px;
            height: 500px;
            background: black;
            transition: all 2s;
        }
        .main:hover{
            width: 100px;
            height: 100px;
            background:yellow;
        }

    </style>
</head>
<body>
    <div class="main"></div>
</body>
</html>

当指针移出元素时，它会逐渐变回原来的样式 。

3. 多项改变

如需向多个样式添加过渡效果，请添加多个属性，由逗号隔开：  
例如:transition: width 2s, height 2s, transform 2s;

过渡属性

下面的表格列出了所有的转换属性：

1.transition：简写属性，用于在一个属性中设置四个过渡属性。
2.transition-property：规定应用过渡的 CSS 属性的名称。
3.transition-duration：定义过渡效果花费的时间。默认是 0。
4.transition-timing-function：规定过渡效果的时间曲线。默认是 "ease"。
　　设值：a.linear 以相同速度开始至结束的过渡效果
　　　　　b.ease-in以慢速开始的过渡效果
　　　　　c.ease慢速开始，然后变快，然后慢速结束的过渡效果
　　　　　d.ease-out以慢速结束的过渡效果
　　　　　e.ease-in-out以慢速开始和结束的过渡效果
5.transition-delay：规定过渡效果何时开始。默认是 0。

二.2D转换

1.通过 translate() 方法，元素从其当前位置移动，根据给定的 left（x 坐标） 和 top（y 坐标） 位置参数：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
    div
{
margin:30px;
width:200px;
height:200px;
background-color:yellow;
transition: all 3s;
border-radius: 100px 100px;

}
.div2{
    transform:translate(50px,60px);

}
    </style>
</head>
<body>
    <div></div>
    <div class="div2"></div>
</body>
</html>

　　transform: translate(50px,50px);（把元素从左侧移动 50 像素，从顶端移动 50 像素）

2.通过 rotate() 方法，元素顺时针旋转给定的角度。允许负值，元素将逆时针旋转。

　　

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
    div
{
margin:30px;
width:200px;
height:200px;
background-color:yellow;
transition: all 3s;
border-radius: 100px 100px;

}
.div2{
     transform:rotate(30deg); 

}
    </style>
</head>
<body>
    <div></div>
    <div class="div2"></div>
</body>
</html>

　transform: rotate(60deg);（把元素顺时针旋转 60 度。）

3.通过 scale() 方法，元素的尺寸会增加或减少，根据给定的宽度（X 轴）和高度（Y 轴）参数：

　　

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
    div
{
margin:30px;
width:200px;
height:200px;
background-color:yellow;
transition: all 3s;
border-radius: 100px 100px;

}
.div2{
    transform: scale(2,2);

}
    </style>
</head>
<body>
    <div></div>
    <div class="div2"></div>
</body>
</html>

　　transform: scale(2,2);（把宽度转换为原始尺寸的 2 倍，把高度转换为原始高度的 2 倍。）

4.通过 skew() 方法，元素翻转给定的角度，根据给定的水平线（X 轴）和垂直线（Y 轴）参数：

　　

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
    div
{
margin:30px;
width:200px;
height:200px;
background-color:yellow;
transition: all 3s;
border-radius: 100px 100px;

}
.div2{
    transform: skew(30deg,20deg);

}
    </style>
</head>
<body>
    <div></div>
    <div class="div2"></div>
</body>
</html>

　　

　　transform: skew(60deg,60deg);（围绕 X 轴把元素翻转 60 度，围绕 Y 轴翻转 60 度）

5.matrix() 方法把所有 2D 转换方法组合在一起。
matrix() 方法需要六个参数，包含数学函数，允许您：旋转、缩放、移动以及倾斜元素。

2D Transform 方法

matrix(n,n,n,n,n,n) 定义2D转换，使用六个值的矩阵。
translate(x,y) 定义2D转换，沿着 X 和 Y 轴移动元素。
translateX(n) 定义2D转换，沿着 X 轴移动元素。
translateY(n) 定义2D转换，沿着 Y 轴移动元素。
scale(x,y) 定义2D缩放转换，改变元素的宽度和高度。
scaleX(n) 定义2D缩放转换，改变元素的宽度。
scaleY(n) 定义2D缩放转换，改变元素的高度。
rotate(angle) 定义2D旋转，在参数中规定角度。
skew(x-angle,y-angle) 定义2D倾斜转换，沿着 X 和 Y 轴。
skewX(angle) 定义2D倾斜转换，沿着 X 轴。
skewY(angle) 定义2D倾斜转换，沿着 Y 轴。

三.3D转换

2D 转换与 3D 转换之间的不同之处：2D为平面旋转；3D为空间旋转 。

 转换属性
下面列出了所有的转换属性：
transform    向元素应用 2D 或 3D 转换。
transform-origin    允许你改变被转换元素的位置。    
transform-style    规定被嵌套元素如何在 3D 空间中显示。    
perspective    规定 3D 元素的透视效果。    
perspective-origin    规定 3D 元素的底部位置。    
backface-visibility    定义元素在不面对屏幕时是否可见。

3D 转换方法
matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n)    3D 转换，使用 16 个值的 4x4 矩阵。
translate3d(x,y,z)         3D 转化。
translateX(x)     3D 转化，仅使用用于 X 轴的值。
translateY(y)     3D 转化，仅使用用于 Y 轴的值。
translateZ(z)     3D 转化，仅使用用于 Z 轴的值。
scale3d(x,y,z)     3D 缩放转换。
scaleX(x)     3D 缩放转换，通过给定一个 X 轴的值。
scaleY(y)     3D 缩放转换，通过给定一个 Y 轴的值。
scaleZ(z)     3D 缩放转换，通过给定一个 Z 轴的值。
rotate3d(x,y,z,angle)     3D 旋转。
rotateX(angle)    沿 X 轴的 3D 旋转。
rotateY(angle)    沿 Y 轴的 3D 旋转。
rotateZ(angle)    沿 Z 轴的 3D 旋转。
perspective(n)    3D 转换元素的透视视图。 perspective（透视距离）：观察者距离Z轴原点的距离，设置该属性会制造透视效果。（perspective 属性只影响 3D 转换元素。）

rotateX()方法
通过 rotateX() 方法，元素围绕其 X 轴以给定的度数进行旋转。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        div
        {
        width:100px;
        height:75px;
        background-color:yellow;
        border:1px solid black;
        }
        .div2
        {
        transform:rotateX(150deg)
        }
        </style>
        </head>
        <body>
        <div>第一个div</div>
        <div class="div2">第二个div2</div>
        </body>
</html>

rotateY() 旋转
通过 rotateY() 方法，元素围绕其 Y 轴以给定的度数进行旋转。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        div
        {
        width:100px;
        height:75px;
        background-color:yellow;
        border:1px solid black;
        }
        .div2
        {
        transform: rotateY(150deg);
        }
        </style>
        </head>
        <body>
        <div>第一个div</div>
        <div class="div2">第二个div2</div>
        </body>
</html>

原文地址：https://www.cnblogs.com/youwei716/p/11070773.html

时间： 2024-08-29 04:58:08

过渡及2D与3D转换的相关文章

CSS3 2D、3D转换

2D转换方法:transform().rotate().scale().skew().matrix() 3D转换方法:rotateX().rotateY() 1.示例代码 <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>2D.3D转换</title> <style> section{width:

CSS3的2D与3D转换

2D和3D转换涉及到数学中的知识,作为一个数学专业的毕业生,不研究一下岂不是对不起自己的专业? 首先来看几个参数: 1.transform-origin:origin(起源,起点),也即变形的起点,在数学上可以理解为坐标原点. 其语法为:transform-origin:[<percentage> | <length> | left | center | right | top | bottom] | [<percentage> | <length> | l

CSS3 2D、3D 转换

一.CSS3 转换 通过 CSS3 转换,我们能够对元素进行移动.缩放.转动.拉长或拉伸. 浏览器支持 Internet Explorer 10.以及 Opera 支持 transform 属性. 注释:Internet Explorer 9 需要前缀 -ms-. Chrome 和 Safari 需要前缀 -webkit-. 二.2D 转换 在本章中,您将学到如下 2D 转换方法: translate() rotate() scale() skew() matrix() 1.translate(

CSS3中的2D和3D转换知识介绍

一  2D转换 转换是CSS3中具有颠覆性的特征之一,可以实现元素的位移.旋转.变形.缩放,甚至支持矩阵方式,配合即将学习的过渡和动画知识,可以取代大量之前只能靠Flash才可以实现的效果. 1.移动 translate(x, y) 可以改变元素的位置,x.y可为负值: 2.缩放 scale(x, y) 可以对元素进行水平和垂直方向的缩放,x.y的取值可为小数,不可为负值: 4.旋转 rotate(deg) 可以对元素进行旋转,正值为顺时针,负值为逆时针: 5.倾斜 skew(deg, deg)

CSS笔记（十二）CSS3之2D和3D转换

参考:http://www.w3school.com.cn/css3/css3_2dtransform.asp 2D Transform 方法 函数 描述 matrix(n,n,n,n,n,n) 定义 2D 转换,使用六个值的矩阵. translate(x,y) 定义 2D 转换,沿着 X 和 Y 轴移动元素. translateX(n) 定义 2D 转换,沿着 X 轴移动元素. translateY(n) 定义 2D 转换,沿着 Y 轴移动元素. scale(x,y) 定义 2D 缩放转换,改

CSS3动画与2D、3D转换

一.过度动画:transition 五个属性: transition-property css 样式属性名称 transition-duration 动画持续时间(需要单位s) transition-timing-function 动画效果函数名称 linear.ease.ease-in.ease-out. ease-in-out.cubic-bezier(n,n,n,n) transition-delay 延迟执行动画的时间 animation-play-state:paused;暂停动画执行

css3动画与2D、3D之间的转换

应用css3中的transition(过渡动画).@keyframes(关键帧动画).transform(2D.3D转换)可以实现一些小的动画效果. 一.transition—过渡动画 <!DOCTYPE html> <html><head> <title>基本图像的放大缩小</title> <meta charset="utf-8"> <style type="text/css">

动画，2D转换，，3D转换怎样运用

动画 @keyframes 规则用于创建动画.在 @keyframes 中规定某项 CSS 样式, 就能创建由当前样式逐渐改为新样式的动画效果. 属性{[email protected] 2animation } 如:@keyframes myfirst { from {background: red;} to {background: yellow;} } @-moz-keyframes myfirst /* Firefox */ { from {background: red;} to {b

Css3之高级-5 Css转换(简介、2D转换、3D转换)

一.转换简介 转换概述 - 转换是使元素改变形状.尺寸和位置的一种效果 - 又称为变形,即,可以向元素应用2D 或 3D 转换,从而对元素进行旋转.缩放.移动或倾斜 - 2D 转换: 使元素在 X轴 和 Y轴 平面上发生变化,改变其形状.尺寸和位置 - 3D 转换:元素还可以在 Z 轴上发生变化 转换属性 - transform 属性向元素应用 2D 或者 3D 转换 - 指定一组转换函数,取值 - transform: none/transform-function; - none - 默认值