translate3d绕轴旋转

translate3d绕轴旋转<!DOCTYPEhtml><htmllang=”en”><head><metacharset=”UTF-8″><metahttp-equiv=”X-UA-Compatible”content=”IE=edge”><metaname=”viewport”content=”width=device-width,initial-scale=1.0″><title…

大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全家桶1年46,售后保障稳定

translate3d绕轴旋转

 

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /****************再次注意让图片完美切合盒子给图片设置宽高100%****************/
        div img {
            width: 100%;
            height: 100%;
        }

        .xbox {
            width: 300px;
            height: 300px;
            display: inline-block;
            border: 1px solid black;
        }

        .xbox1 {
            width: 200px;
            height: 200px;
            border: 1px solid brown;
            margin-top: 50px;
            margin-left: 50px;
            transition: all 1s;
        }

        .xbox1:hover {
            transform: rotateX(55deg);
        }

        .Xbox {
            width: 300px;
            height: 300px;
            display: inline-block;
            border: 1px solid black;
            perspective: 500px;
        }

        .Xbox1 {
            width: 200px;
            height: 200px;
            border: 1px solid brown;
            margin-top: 50px;
            margin-left: 50px;
            transition: all 1s;
        }

        .Xbox1:hover {
            transform: rotateX(55deg);
        }

        /************************Y************************/
        .ybox {
            width: 300px;
            height: 300px;
            display: inline-block;
            border: 1px solid black;
        }

        .ybox1 {
            width: 200px;
            height: 200px;
            border: 1px solid brown;
            margin-top: 50px;
            margin-left: 50px;
            transition: all 1s;
        }

        .ybox1:hover {
            transform: rotateY(55deg);
        }

        .Ybox {
            width: 300px;
            height: 300px;
            display: inline-block;
            border: 1px solid black;
            perspective: 500px;
        }

        .Ybox1 {
            width: 200px;
            height: 200px;
            border: 1px solid brown;
            margin-top: 50px;
            margin-left: 50px;
            transition: all 1s;
        }

        .Ybox1:hover {
            transform: rotateY(55deg);
        }

        /***************************Z轴旋转**********************/
        .zbox {
            width: 300px;
            height: 300px;
            display: inline-block;
            border: 1px solid black;
        }

        .zbox1 {
            width: 200px;
            height: 200px;
            border: 1px solid brown;
            margin-top: 50px;
            margin-left: 50px;
            transition: all 1s;
        }

        .zbox1:hover {
            transform: rotateZ(55deg);
        }

        .Zbox {
            width: 300px;
            height: 300px;
            display: inline-block;
            border: 1px solid black;
            perspective: 500px;
        }

        .Zbox1 {
            width: 200px;
            height: 200px;
            border: 1px solid brown;
            margin-top: 50px;
            margin-left: 50px;
            transition: all 1s;
        }

        .Zbox1:hover {
            transform: rotateZ(55deg);
        }

        /**********************************侧轴*******************************/
        .cbox {
            width: 300px;
            height: 300px;
            display: inline-block;
            border: 1px solid black;
        }

        .cbox1 {
            width: 200px;
            height: 200px;
            border: 1px solid brown;
            margin-top: 50px;
            margin-left: 50px;
            transition: all 1s;
        }

        .cbox1:hover {
            transform: rotate3d(1, 1, 0, 55deg);
            /****x,y,z,旋转角度***/
        }

        .Cbox {
            width: 300px;
            height: 300px;
            display: inline-block;
            border: 1px solid black;
            perspective: 500px;
        }

        .Cbox1 {
            width: 200px;
            height: 200px;
            border: 1px solid brown;
            margin-top: 50px;
            margin-left: 50px;
            transition: all 1s;
        }

        .Cbox1:hover {
            transform: rotate3d(1, 1, 0, 55deg);
            /****x,y,z,旋转角度***/
        }
    </style>
</head>

<body>
    <p>沿着x轴旋转:两个都是绕x轴旋转55度第一个不加(perspective)透视(透视会给人一种元素前添加了空间的感觉),
        旋转是左手法则大拇指指向对应轴的正方向左手其余手指弯曲的方向就是正旋转方向(顺时针)
    </p>
    <div class="xbox">
        <div class="xbox1"><img src="../../imags/ggg.jpg"></div>
    </div>
    <div class="Xbox">
        <div class="Xbox1"><img src="../../imags/ggg.jpg"></div>
    </div>
    <p>沿着Y轴旋转:两个都是绕Y轴旋转55度第一个不加(perspective)透视--------------------------沿着Z轴旋转:两个都是绕Z轴旋转55度第一个不加(perspective)透视</p>
    <div class="ybox">
        <div class="ybox1"><img src="../../imags/ggg.jpg"></div>
    </div>
    <div class="Ybox">
        <div class="Ybox1"><img src="../../imags/ggg.jpg"></div>
    </div>
    <div class="zbox">
        <div class="zbox1"><img src="../../imags/ggg.jpg"></div>
    </div>
    <div class="Zbox">
        <div class="Zbox1"><img src="../../imags/ggg.jpg"></div>
    </div>
    <p>侧轴旋转</p>
    <div class="cbox">
        <div class="cbox1"><img src="../../imags/ggg.jpg"></div>
    </div>
    <div class="Cbox">
        <div class="Cbox1"><img src="../../imags/ggg.jpg"></div>
    </div>
</body>

</html>

Jetbrains全家桶1年46,售后保障稳定

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/234606.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)
blank

相关推荐

  • IDDR和ODDR使用

    IDDR和ODDR原语是针对7系列芯片使用,spand可以使用IDDR2和ODDR2IDDR三种模式OPPOSITE_EDGEMode传统的输入DDR解决方案或OPPOSITE_EDGE模式是通过ILOGIC模块中的单个输入实现的。数据在时钟的上升沿通过输出Q1提供给FPGA逻辑,在时钟的下降沿通过输出Q2提供给FPGA逻辑。该结构类似于Virtex-6FPGA实现。图1显示…

  • 软件工程师角度看MIPI协议

    软件工程师角度看MIPI协议【版权申明】未经博主同意,谢绝转载!(请尊重原创,博主保留追究权)软件工程师角度看MIPI协议一、MIPI的由来: 在手机行业的初期,优胜劣汰适者生存的手机行业竞争激烈.在这个过程中涌现出了许许多多不同的创新的点子,例如摄像头的接口,由于每个厂商不存在统一的规范,不同的摄像头模组厂商可能会使用的不同的接口,在做适配的时候极其不方便以及个别接口非常不好用(接口技术碎片化导致集…

  • Ascii code_扩展ascii码表

    Ascii code_扩展ascii码表ASCII码表如下:Bin(二进制)Oct(八进制)Dec(十进制)Hex(十六进制)缩写/字符解释000000000000x00NUL(null)空字符000000010110x01SOH(startofheadline)标题开始000000100220x02STX(startoftext)正文开始0000001103…

  • 阻止mouseover冒泡行为_onmousedown是什么意思

    阻止mouseover冒泡行为_onmousedown是什么意思一.onmouseenter、onmouseoveronmouseenter事件在鼠标指针进入到绑定事件的那个元素上时触发。该事件通常与onmouseleave(在鼠标指针离开绑定事件的那个元素上时触发)事件一同使用。onmouseenter事件类似于onmouseover事件。唯一的区别是onmouseenter事件不支持冒泡。二.实例演示onmousemov…

  • Python元组

    在python中有六种内建的序列:列表、元祖、字符串、Unicode字符串、buffer对象hexrange对象。通用序列操作:1.索引(indexing)2.分片(slicing)3.

    2021年12月18日
  • 龙芯架构是自己的吗_debian重装系统

    龙芯架构是自己的吗_debian重装系统龙芯灵珑一体机,型号9s2a,pmon版本LM9103-1.5.9原机硬盘250g,装有debian5和debian6双系统由于在debian6系统下不小心误删除了部分文件,导致系统不能关机,不能重启,故重装。此次安装采用usb安装方式前期准备:(在linux系统下,下载安装文件,解压文件,拷贝到u盘)1,将debian6的安装文件拷贝到u盘(一体机挑u盘,没有u盘可以采用硬盘…

    2022年10月18日

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号