欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

2D and 3D

程序员文章站 2022-03-25 23:43:57
...

2D

						transform
transform:旋转 rotate(30deg);
translate值(50px,100px)是从左边元素移动50个像素,并从顶部移动100像素。transform: translate(50px,100px);
scale()方法,该元素增加或减少的大小,取决于宽度(X轴)和高度(Y轴)的参数:
transform:skew(<angle> [,<angle>]);分别表示X轴和Y轴倾斜的角度,如果第二个参数为空,则默认为0,参数为负表示向相反方向倾斜。
transform:matrix(0.866,0.5,-0.5,0.866,0,0);   matrix 方法有六个参数,包含旋转,缩放,移动(平移)和倾斜功能。

3D

<!-- 旋转老k -->
<!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>
    body{
     margin: 0;
     padding: 0;
    }
    .div{
        width: 155px;
        height: 219px;
        position: relative;
        margin: 300px auto;
        
    }
    .div img{
        width: 155px;
        height: 219px;
        position: absolute;
        left: 0;
        top: 0;
        transition: transform 2s;
        transform-origin: left top;
    }
    .div:hover>img:nth-of-type(1){
     
      transform: rotate(60deg); 
    }
    .div:hover>img:nth-of-type(2){
     
      transform: rotate(120deg); 
    }
    .div:hover>img:nth-of-type(3){
     
      transform: rotate(180deg); 
    }
    .div:hover>img:nth-of-type(4){
     
      transform: rotate(240deg); 
    }
    .div:hover>img:nth-of-type(5){
     
      transform: rotate(300deg); 
    }
    .div:hover>img:nth-of-type(6){
     
      transform: rotate(360deg); 
    }
    </style>
</head>
<body>
    <div class="div">
        <img src="./../../../数据库/图片//jpg图片//老k.jpg" alt="">
        <img src="./../../../数据库/图片//jpg图片//老k.jpg" alt="">
        <img src="./../../../数据库/图片//jpg图片//老k.jpg" alt="">
        <img src="./../../../数据库/图片//jpg图片//老k.jpg" alt="">
        <img src="./../../../数据库/图片//jpg图片//老k.jpg" alt="">
        <img src="./../../../数据库/图片//jpg图片//老k.jpg" alt="">
    </div>
</body>
</html>
<!-- 
    转换属性
下表列出了所有的转换属性:
属性                                 描述
CSS                                transform
向元素应用 2D 或 3D 转换。           transform-origin  以某一个点转动
允许你改变被转换元素的位置。          transform-style 
规定被嵌套元素如何在 3D 空间中显示 。 perspective-3D
规定 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 转换元素的透视视图。
 -->
相关标签: CSS3