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)


相关推荐

  • TestDisk使用教程

    TestDisk使用教程修复一个读取不出盘符,数据的硬盘

    2022年10月24日
  • 蓝鲸自动化运维平台

    蓝鲸自动化运维平台蓝鲸自动化运维平台1.蓝鲸简介官网:https://bk.tencent.com/docs/腾讯蓝鲸智云,简称蓝鲸,是腾讯互动娱乐事业群(InteractiveEntertainmentGroup,简称IEG)自研自用的一套用于构建企业研发运营一体化体系的PaaS开发框架,提供了aPaaS(DevOps流水线、运行环境托管、前后台框架)和iPaaS(持续集成、CMDB、作业平台、容器管理、数据平台、AI等原子平台)等模块,帮助企业技术人员快速构建基础运营PaaS。2.蓝鲸部署2

  • 区别 git clone 与 git pull

    区别 git clone 与 git pull1、gitclone与gitpull相同点相同点:都是从远程服务器拉取代码到本地2、gitclone与gitpull不同点gitclone是在本地没有版本库的时候,从远程服务器克隆整个版本库到本地,是一个本地从无到有的过程。gitpull在本地有版本库的情况下,从远程库获取最新commit数据(如果有的话),并merge(合并)到本地。gitpull=…

  • 光栅投影中Gamma校正

    光栅投影中Gamma校正学习郑东亮达飞鹏《提高数字光栅投影测量系统精度的gamma校正技术》一文后,对其中的关键技术进行了解析。摄像机获得的实际灰度图像:其中是整个系统的gamma值,是预编码值(需要根据实验进行选择),是幅度调制(保证归一化),是背景光强,和是由系统确定的值(需要通过投射不同的灰度图进行解算)。gamma校正的目的:选择一个合适的预编码值,使得,从而使系统的gamma失真得以消除或者减…

  • 16位汇编指令_汇编语言指令表

    16位汇编指令_汇编语言指令表汇编语言特点:与机器相关,执行效率高,调试复杂汇编语言优缺点:汇编语言和高级语言混合编写,互补数据表示类型:二进制B,八进制Q,十进制D,十六进制HBCD编码:用二进制来表示十进制数CPU资源和存储器:通用寄存器,标志寄存器,指令寄存器EAX,累加ECX,循环计数EDX,数据寄存器EBX,基址寄存器ESP,栈顶EBP,栈底ESI,扩展源指针EDI,扩

    2022年10月21日
  • 谷歌浏览器缓存清理怎么弄_如何清理谷歌浏览器缓存

    谷歌浏览器缓存清理怎么弄_如何清理谷歌浏览器缓存清除缓存快捷键Ctrl+Shift+Delete

发表回复

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

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