前端的学习之路：初级CSS---旋转图片

最新推荐文章于 2023-08-29 14:27:36 发布

new-SkyWaller

最新推荐文章于 2023-08-29 14:27:36 发布

阅读量292

点赞数

分类专栏：初级CSS 文章标签： css 前端

本文链接：https://blog.csdn.net/weixin_44647555/article/details/113783011

版权

初级CSS 专栏收录该内容

75 篇文章 0 订阅

订阅专栏

旋转图片

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>旋转图片</title>
    <!-- <link rel="stylesheet" href="../chujicss/css/11.28.04.css"> -->
    <style>
        html{
            /* 设置当前网页的视距为800px,人眼距离网页的距离 */
            perspective: 800px;
        }
        body{
            border: 1px red solid;
            background-color: rgb(241, 241, 241);
        }
        .box1{
            width: 499px;
            height: 375px;
            background-color: #bfa;
            margin: 200px auto;
            
            transition: 2s;

        }
        body:hover .box1{
           /* 
           通过旋转可以使元素沿着x,y,z轴旋转指定的角度
            rotateX()
            rotateY()
            rotateZ()
    
           */
           /* transform: rotateZ(180deg); */
           /* transform: rotateX(90deg); */
           /* transform: rotateY(180deg) translateZ(200px); */
           /* transform: translateZ(400px) rotateY(180deg); */
           transform: rotateY(180deg);
           /* 是否显示元素的背面 */
           backface-visibility: hidden;
        }
    </style>
</head>
<body>
    <div class="box1">
        
        <img src="./chujicss img/11.15.1.jpg" alt="">
    </div>
</body>
</html>

运行结果为：
不显示元素背面时：
在这里插入图片描述

显示元素背面时：
在这里插入图片描述

new-SkyWaller

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端的学习之路：初级CSS---旋转图片

旋转图片<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>旋转图片</title> <!-- <link rel="stylesheet" href=
复制链接

扫一扫