css3D效果

最新推荐文章于 2024-04-18 10:30:43 发布

懒得一批s

最新推荐文章于 2024-04-18 10:30:43 发布

阅读量350

点赞数 3

分类专栏： css

本文链接：https://blog.csdn.net/weixin_44797717/article/details/102888860

版权

css 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

今天写了一个关于3D旋转和位移的小例子，这个用法我觉得还蛮炫酷的，我们可以把颜色块换成图片，并且加上超链接，让他成为一个旋转的导航块，因为还没有学完动画只能先用hove代替了等以后学了动画还会在改进的

源代码如下

<!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>
<style>
    #obsever{
        width: 800px;
        height: 400px;
        margin: 100px auto;
        perspective :600px;
    }
    #screen{
        
        width: 800px;
        height: 400px;
        transform-style:preserve-3d;
        /*下面这行是调整角度的*/
        transform: rotateX(-20deg) rotatey(-359deg);
        position:relative;
        transition:2s;
        }

    #screen:hover{
    /* 下面这是添加过渡效果 和鼠标移动上去时的旋转角度*/
        transform: rotateX(-20deg);
        transition:10s;
    }

    p{
        position:absolute;
        left: 350px;
        top: 150px;
        width: 60px;
        height: 60px; 
        margin: 0;  
          }

    #p1{
        background: url(images/61.png);
        background-size:100%;        
            transform:  translatez(200px);
    }
    #p2{
        background-color: gold;
        /* 下面这行是用来调整图片位置 */
        transform: rotatey(30deg) translatez(200px);
    }
    #p3{
        background-color: goldenrod;
        transform: rotatey(60deg) translatez(200px);
    }
    #p4{
        background-color: green;
        transform: rotatey(90deg) translatez(200px);
    }
    #p5{
        background-color: greenyellow;
        transform: rotatey(120deg) translatez(200px);
    }
    #p6{
        background-color: hotpink;
        transform: rotatey(150deg) translatez(200px);
    }
    #p7{
        background-color: khaki;
        transform: rotatey(180deg) translatez(200px);
    }
    #p8{
        background-color: lightblue;
        transform: rotatey(210deg) translatez(200px);
    }
    #p9{
        background-color: lightgreen;
        transform: rotatey(240deg) translatez(200px);
    }
    #p10{
        background-color: royalblue;
        transform: rotatey(270deg) translatez(200px);
    }
    #p11{
        background-color: orange;
        transform: rotatey(300deg) translatez(200px);
    }
    #p12{            
        background-color: palegreen;
        transform: rotatey(330deg) translatez(200px);
        }
</style>
</head>
<body>
<div id="obsever" > 
    <div id="screen">
        <p id="p1" >1</p>
        <p id="p2" >2</p>
        <p id="p3" >3</p>
        <p id="p4" >4</p>
        <p id="p5" >5</p>
        <p id="p6" >6</p>
        <p id="p7" >7</p>
        <p id="p8" >8</p>
        <p id="p9" >9</p>
        <p id="p10" >10</p>
        <p id="p11" >11</p>
        <p id="p12" >12</p>
    </div>
</div>

</body>
</html>

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

鼠标移动到上面之后会逐渐旋转
在这里插入图片描述
最后再说一点我遇到的坑
注意！！！
在调整图片位置的时候一定要先旋转在位移！！！
图片旋转之后他的xyz轴都会转变！！这时在调整图片位置
transform: rotatey(30deg) translatez(200px);

过渡与3D旋转我之前是发过博客的这里给你们链接
这是过渡博客
 这是3d旋转的

懒得一批s

关注

3
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
css3D效果

今天写了一个关于3D旋转和位移的小例子，这个用法我觉得还蛮炫酷的，我们可以把颜色块换成图片，并且加上超链接，让他成为一个旋转的导航块，因为还没有学完动画只能先用hove代替了等以后学了动画还会在改进的源代码如下<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><m...
复制链接

扫一扫