正方体实例

最新推荐文章于 2024-08-28 15:18:58 发布

　Dinosaur.

最新推荐文章于 2024-08-28 15:18:58 发布

阅读量144

点赞数 1

分类专栏：笔记文章标签： css3 html

原文链接：https://blog.csdn.net/qq_40892188/article/details/82716477

版权

笔记专栏收录该内容

4 篇文章 0 订阅

订阅专栏

该博客展示了如何使用CSS3实现一个立体旋转盒子的效果，包括前、后、左、右、上、下六个面。通过transform-style、perspective、rotate3d等属性，创建了带有景深和透视的立体旋转效果，适用于前端开发中的交互设计。

摘要由CSDN通过智能技术生成

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>立体盒子</title>
    <style>
        .box{
            height:200px;
            width: 200px;
            margin: 100px auto;
            position: relative;
            transform: rotate3d(1,1,0,-15deg);
            /*让子元素保留3d变换效果*/
            transform-style: preserve-3d;
            /*添加透视景深效果*/
            perspective: 3000px;
            /*设置透视的观察角度*/
            perspective-origin: 150px 150px;
        }
        .box > div{
            width: 200px;
            height: 200px;
            position: absolute;
            opacity: 0.6;
        }
        .front{
            background-color: red;
            /*变化完毕后会回到原始状态*/
            transform: translateZ(100px);
        }
        .back{
            background-color: yellowgreen;
            transform: translateZ(-100px) rotateY(180deg);
        }
        .left{
            background-color: grey;
            /*移动加旋转*/
            transform: translateX(-100px) rotateY(-90deg);
        }
        .right{
            background-color: magenta;
            transform: translateX(100px) rotateY(90deg);
        }
        .top{
            background-color: deepskyblue;
            transform: translateY(-100px) rotateX(90deg);
        }
        .bottom{
            background-color: peachpuff;
            transform: translateY(100px) rotateX(-90deg);
        }
    </style>
</head>
<body>
<div class="box">
    <div class="front">front</div>
    <div class="back">back</div>
    <div class="left">left</div>
    <div class="right">right</div>
    <div class="top">top</div>
    <div class="bottom">bottom</div>
</div>

</body>
</html>

　Dinosaur.

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
正方体实例

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>立体盒子</title> <style> .box{ height:200px; width: 200px; margin: 100px auto; .
复制链接

扫一扫