• 2D and 3D


    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 转换元素的透视视图。
     -->
  • 相关阅读:
    iOS开发之静态库(二)—— .a
    iOS开发之静态库(一)—— 基本概念
    Linux中ctrl-c, ctrl-z, ctrl-d 区别
    JNI技术基础(1)——从零开始编写JNI代码
    开篇纪念
    java面试题
    jvm系列二之GC收集器
    jvm系列一
    ConcurrentHashMap源码剖析(1.8版本)
    博客系统对比
  • 原文地址:https://www.cnblogs.com/wxy0715/p/12442130.html
Copyright © 2020-2023  润新知