css3 实现3D立方体的两种方法

最新推荐文章于 2024-06-26 14:03:25 发布

wayne丶

最新推荐文章于 2024-06-26 14:03:25 发布

阅读量2.5k

点赞数

分类专栏： css

本文链接：https://blog.csdn.net/qq_39408204/article/details/90373401

版权

css 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

1，使用positon +rotate

 <style>
        .box{
            width: 200px;
            height: 200px;
            padding: 50px;
            margin:  100px auto;
            perspective: 800;
            -webkit-perspective: 800;/* 景深 代表从多远距离看元素的位置 */
            border: 1px solid #000000;
        }
        .div {
            width: 200px;
            height: 200px;
            transition: 5s;
            position: relative;
            transform-style: preserve-3d;/*3d样式*/
            transform-origin: center center 100px;
         }
         .box:hover .div{
             transform: rotateY(360deg)
         }

        .div div{
            position: absolute;
            width: 200px;
            opacity: 0.4;

            font: 100px/200px '宋体';
            text-align: center;
            color: #fff;
            height: 200px;
        }
        
        .div div:nth-of-type(1){
            background: red;
            left: 0;
            top: -200px;
            transform-origin: bottom ;/*圆点*/
            transform: rotateX(-90deg)/*旋转*/
        }
        .div div:nth-of-type(2){
            background: blue;
            left:-200px;
            transform-origin: right ;/*圆点*/
            transform: rotateY(90deg);
            top: 0;
        }
        .div div:nth-of-type(3){
            background: pink;
            left: 0;
            top: 0;
        }
        .div div:nth-of-type(4){
            background: green;
            left: 200px;
            transform-origin: left ;/*圆点*/
            transform: rotateY(-90deg);
            top: 0;
        }
        .div div:nth-of-type(5){
            background: yellow;
            left: 0;
            transform-origin: top ;/*圆点*/
            transform: rotateX(90deg);
            top: 200px;
        }
        .div div:nth-of-type(6){
            background: yellowgreen;
            left: 0;
            transform:translateZ(200px);
            top: 0;
        }

    </style>
<body>
    <div class="box">
        <div class="div">
            <div>1</div>
            <div>2</div>
            <div>3</div>
            <div>4</div>
            <div>5</div>
            <div>6</div>
        </div>
    </div>
</body>

2,transform:rotateY() translateZ() ;

<style>
        .box{
            width: 200px;
            height: 200px;
            padding: 50px;
            margin:  100px auto;
            perspective: 800;
            -webkit-perspective: 800;/* 景深 */
            border: 1px solid #000000;
        }
        .div {
            width: 200px;
            height: 200px;
            transition: 5s;
            position: relative;
            transform-style: preserve-3d;/*3d*/
         }
         .box:hover .div{
             transform: rotatey(360deg)
         }
        .div div{
            position: absolute;
            width: 200px;
            opacity: 0.4;
            left: 0;
            top: 0;
            font: 100px/200px '宋体';
            text-align: center;
            color: #fff;
            height: 200px;
        }
        
        .div div:nth-of-type(1){
            background: red;
            transform:  rotateY(0) translateZ(100px) ;

        }
        .div div:nth-of-type(2){
            background: blue;
            transform:  rotateY(90deg) translateZ(100px) ;
            
        }
        .div div:nth-of-type(3){
            background: pink;
            transform:  rotateY(180deg) translateZ(100px) ;
        }
        .div div:nth-of-type(4){
            background: green;
            transform:  rotateY(270deg) translateZ(100px) ;
        }
        .div div:nth-of-type(5){
            background: yellow;
            transform:  rotateX(-90deg) translateZ(100px) ;
      
        }
        .div div:nth-of-type(6){
            background: yellowgreen;
            transform:  rotateX(90deg) translateZ(100px) ;
            
        }

    </style>
<body>
    <div class="box">
        <div class="div">
            <div>1</div>
            <div>2</div>
            <div>3</div>
            <div>4</div>
            <div>5</div>
            <div>6</div>
        </div>
    </div>
</body>

wayne丶

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
css3 实现3D立方体的两种方法

1，使用positon +rotate <style> .box{ width: 200px; height: 200px; padding: 50px; margin: 100px auto; perspective: 800; ...
复制链接

扫一扫

专栏目录