• 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 转换元素的透视视图。
     -->
  • 相关阅读:
    线性规划学习笔记
    函数案例练习(python练习):设计一个简单的人员管理系统
    Python selenium Chrome正在受到自动软件的控制 disableinfobars无效 的解决方法
    IIS、apache、nginx日志中如何获取用户的真实IP?
    采用云计算轻松实现多人同时编辑在线思维导图
    成功加入BizSpark
    鹰翔MindV在线思维导图软件寒假期间开放个人版功能
    在线思维导图软件MindV收录在Windows azure marketplace
    写博客免费使用在线思维导图软件MindV个人版
    祝贺MindV进入香港国际软件大奖赛100强
  • 原文地址:https://www.cnblogs.com/wxy0715/p/12442130.html
Copyright © 2020-2023  润新知