CSS 立体效果

最新推荐文章于 2024-09-19 14:11:58 发布

lanfuA

最新推荐文章于 2024-09-19 14:11:58 发布

阅读量966

点赞数 1

分类专栏： css 文章标签： css css3

本文链接：https://blog.csdn.net/lanfuA/article/details/107348509

版权

css 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

2d转换

移动
旋转

3d转换

3维空间，有3条轴，水平方向x轴，竖直方向为y轴，垂直屏幕方向为z轴，简单来说就是一个平面在移动过程中x轴控制上下方向

y轴控制左右方向，z轴控制前后方向。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>lifang</title>
</head>
<style>
    body {
        /* 设置透视点 */
        perspective: 1000px;
    }
    
    .lifang {
        /* position: relative;相对定位 */
        position: relative;
        width: 200px;
        height: 200px;
        border: 1px solid #999999;
        margin: 200px auto;
        /*  transform-style: preserve-3d;保留子元素3d效果   */
        transform-style: preserve-3d;
        /* 设置鼠标经过前立方体的状态 */
        transform: rotate3d(1, 1, 1, 0deg);
        /* 过渡 all 表示为所有property   过程时间为3秒 默认  */
        transition: all 3s;
        /*  transition-timing-function为过渡方式  一般默认为ease*/
        transition-timing-function: ease;
        /*  transition-timing-function的值还有linear , ease-in ease-out */
    }
    
    .lifang:hover {
        transform: rotate3d(1, 1, 1, 720deg);
    }
    
    .page {
        /* 绝对定位 */
        /* 绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于<html>: */
        position: absolute;
        width: 200px;
        height: 200px;
        top: 0px;
        left: 0px;
        opacity: 0.6;
    }
    
    .front {
        background-image: url(imgs/01.jpg);
        background-size: 100% auto;
        transform: translateZ(100px)
    }
    
    .back {
        background-image: url(imgs/02.jpg);
        background-size: 100% auto;
        transform: translateZ(-100px);
    }
    
    .left {
        background-image: url(imgs/03.jpg);
        background-size: 100% auto;
        /* 注：rotateY(90deg) 以y轴为主轴旋转90度，这里x轴z轴也会旋转，所以这里需要移动方向的是z轴 translateZ*/
        transform: rotateY(90deg) translateZ(-100px)
    }
    
    .right {
        background-image: url(imgs/04.jpg);
        background-size: 100% auto;
        transform: rotateY(90deg) translateZ(100px)
    }
    
    .top {
        background-image: url(imgs/05.jpg);
        background-size: 100% auto;
        transform: rotateX(90deg) translateZ(100px)
    }
    
    .bottom {
        background-image: url(imgs/06.jpg);
        background-size: 100% auto;
        transform: rotateX(90deg) translateZ(-100px)
    }
</style>

<body>
    <div class="lifang">
        <div class="page front"></div>
        <div class="page back"></div>
        <div class="page left"></div>
        <div class="page right"></div>
        <div class="page top"></div>
        <div class="page bottom"></div>
    </div>

</body>

</html>