CSS三维倾斜

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>Documenttitle>
    <style>
    	/* 一定要给父元素设置井深 */
        .container {
            perspective: 800px;
            perspective-origin: 100px 100px;
        }
        .box {
            width: 100px;
            height: 200px;
            background-color: #0ff;
            transform-style: preserve-3d;
            transform : rotateY(30deg);
        }
    style>
head>
<body>
    <div class="container">
        <div class="box">
            <img src="https://gimg3.baidu.com/search/src=http%3A%2F%2Fpics4.baidu.com%2Ffeed%2F4610b912c8fcc3ce4eaca9a0af3a7d82d53f20ba.jpeg%3Ftoken%3Da1b53adbfd73105ea889189a37104fae&refer=http%3A%2F%2Fwww.baidu.com&app=2021&size=f360,240&n=0&g=0n&q=75&fmt=auto?sec=1658422800&t=d1adbae67f85650b8bd45ad2dada1b23" alt="">
        div>
    div>
body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

效果：
在这里插入图片描述

相关阅读:
html 隐藏广告代码,Javascript实现关闭广告实现删除广告的效果
卷积神经网络基础篇
Linux 服务器 Firewalld 防火墙配置端口转发
功率谱密度PSD(笔记)
优化 Vue 编译速度的方法
supervisor管理进程用法详解
float 浮动
atguigu8 集群
CREO：利用CREO软件实现装配设计之四连杆机构设计案例应用(图文教程)之详细攻略
vuex学习记录

原文地址：https://blog.csdn.net/qq_40864647/article/details/125894226