3D旋转（CSS3）

- 日理万妓 2023-10-03 13:39 55阅读 0赞

## 3D旋转（CSS3） ##

<!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>3D旋转 rotate3d
        </title>
        <style>
            body {
        
                /*  perspective: 500px; */
                perspective: 200px;
                /* 立体效果更加明显 */
    
            }
    
            img {
        
                width: 249px;
                height: 249px;
                display: block;
                margin: 100px auto;
                transition: all 1s;
            }
    
            img:hover {
        
                /*  transform: rotateX(180deg); */
                /* transform: rotateX(360deg); */
                /* transform: rotateX(45deg); */
    
                /* transform: rotateY(180deg); */
                /*  transform: rotateY(45deg); */
    
                /*   transform: rotateZ(180deg); */
    
                transform: rotate3d(1, 0, 0, 45deg);
    
            }
        </style>
    </head>
    
    <body>
        <img src="xg.png" alt="">
    </body>
    
    </html>

发表评论取消回复

表情：

评论列表（有 0 条评论，55人围观）

还没有评论，来说两句吧...

相关阅读

相关【CSS3】CSS3 3D 转换 ④ ( 3D 旋转 rotate3d | rotate3d 语法 | rotate3d 自定义轴旋转 | 元素旋转方向 - 左手准则 | 代码示例 )

文章目录一、3D 旋转 rotate3d 1、rotate3d 语法 2、rotate3d 自定义轴旋转 3、元素旋转方向

一时失言乱红尘/ 2023年10月14日 19:11/ 0 赞/ 30 阅读

相关【CSS3】CSS3 2D 转换 - rotate 旋转 ④ ( 旋转案例 )

文章目录一、需求分析二、代码示例三、运行效果一、需求分析 --------------------

秒速五厘米/ 2023年10月14日 14:19/ 0 赞/ 23 阅读

相关 3D旋转（CSS3）

3D旋转（CSS3） <!DOCTYPE html> <html lang="en"> <head> <meta cha

- 日理万妓/ 2023年10月03日 13:39/ 0 赞/ 56 阅读

相关 CSS元素旋转3D显示

![在这里插入图片描述][20210708114016462.png] html代码 <div class="box"> <div class="mai

落日映苍穹つ/ 2022年10月18日 13:00/ 0 赞/ 272 阅读

相关 css3 3D旋转特效

最近自己的网站正在制作，由于是个人网站，所以我傲娇的抛弃了IE，痛快的用起了css3和html5的诸多特效，然而问题亦随之而来。这篇文章的主要讲解在使用css3的3D旋转的时候

「爱情、让人受尽委屈。」/ 2022年07月16日 06:28/ 0 赞/ 401 阅读

相关 css3 实现正方体3D旋转

源代码如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8

亦凉/ 2022年06月04日 00:06/ 0 赞/ 347 阅读

相关 css 实现3d旋转

<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8">

柔光的暖阳◎/ 2022年05月28日 12:20/ 0 赞/ 349 阅读

相关利用CSS3实现图片3D旋转

以下是本次所作的效果图 ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4

古城微笑少年丶/ 2022年04月15日 01:08/ 0 赞/ 1104 阅读

相关 css之3D旋转讲解

3D动画 3d动画不同于2d动画，它是立体空间，三维的；目的：如何在网站中实现立体效果； 1.建立立体思维方式； 2.找到坐标原点，以及x,y,z轴； x

蔚落/ 2021年11月02日 07:28/ 0 赞/ 612 阅读

相关 css动画 3d旋转相册

思路: 重叠四个图片,然后设置行变点在中心的z轴往后的方向上,分别设置其他图片绕y轴的旋转角度,设置父容器的行变中心点和图片一样并设置透视和3d属

待我称王封你为后i/ 2021年07月25日 02:37/ 0 赞/ 565 阅读