css实现立方体

最新推荐文章于 2024-03-30 14:37:21 发布

narutozoro111

最新推荐文章于 2024-03-30 14:37:21 发布

阅读量133

点赞数

文章标签： css css立方体

本文链接：https://blog.csdn.net/narutozoro111/article/details/103016719

版权

``**3d旋转：元素绕轴旋转后；

x y z轴也旋转

注意：无论元素怎么转动

y轴始终在高度方向

x轴始终在宽度方向 z轴始终与xy平面垂直**

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<style>
    body{
        perspective: 1200px;
    }
    .box{
        width: 200px;
        height: 200px;
        position: absolute;
        top: 300px;
        left: 300px;
        /* 透明度 */
        opacity: 0.5;
    }
    .red{
        /* 前 */
        background-color: red;
        transform: translate3d(0px,0px,100px);
    }
    .yellow{
        /* 上 */
        background-color: yellow;
        transform: rotateX(90deg) translate3d(0px,0px,100px);
    }
    .blue{
        /* 左 */
        background-color: blue;
         transform: rotateY(90deg) translate3d(0px,0px,100px);
    }
    .pink{
        /* 下 */
        background-color: pink;
        transform: rotateX(-90deg)  translate3d(0px,0px,100px);
    }
    .green{
        /* 右 */
        background-color: green;
        transform: rotateY(-90deg) translate3d(0px,0px,-100px);
    }
    .orange{
        /* 后 */
        background-color: orange;
        transform: translate3d(0px,0px,-100px);
    }

narutozoro111

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
css实现立方体

```**3d旋转：元素绕轴旋转后；x y z轴也旋转注意：无论元素怎么转动y轴始终在高度方向x轴始终在宽度方向 z轴始终与xy平面垂直**<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" cont...
复制链接

扫一扫