2D and 3D

zjuwangleicn

2020-03-08

<!--   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 方法有六个参数，包含旋转，缩放，移动（平移）和倾斜功能。
 -->

<!-- 旋转老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 转换元素的透视视图。
 -->

transform