CSS3 3D 转换

3D转换

CSS3 3D 转换_第1张图片
CSS3 3D 转换_第2张图片
当我们直接设置translate-z时并不会看见效果,要借助透视

透视

CSS3 3D 转换_第3张图片

translatZ

旋转

CSS3 3D 转换_第4张图片

x轴正向旋转:

CSS3 3D 转换_第5张图片

CSS3 3D 转换_第6张图片
CSS3 3D 转换_第7张图片
y轴正向旋转:

CSS3 3D 转换_第8张图片
CSS3 3D 转换_第9张图片

CSS3 3D 转换_第10张图片

z轴的旋转就和转盘一样

CSS3 3D 转换_第11张图片

transform-style

如果想父元素旋转时子元素也跟着旋转,就要用到这个。
CSS3 3D 转换_第12张图片

案例 两面翻转的盒子

CSS3 3D 转换_第13张图片

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
    <style>
        .box {
      
            position: relative;
            width: 300px;
            height: 300px;
            margin: 100px auto;
            transition: all .5s;
            /* transform-style: preserve-3d; */
        }
        .box:hover {
      
            transform: rotateY(180deg);
        }
        .front,
        .back {
      
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            border-radius: 50%;          
            font-size: 30px;  
            text-align: center;
            line-height: 300px;
            color: #fff;
        }
        .front {
      
            background-color: pink;
            z-index: 1;
        }
        .back {
      
            background-color: purple;
            transform: rotateY(180deg);
        }
    style>
head>
<body>
    <div class="box">
        <div class="front">黑马程序员div>
        <div class="back">哈哈哈哈div>
    div>
body>

案例 3d导航栏

CSS3 3D 转换_第14张图片
分析
这个比较麻烦:

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
    <style>
        * {
      
            margin: 0;
            padding: 0;
        }
        ul {
      
            margin: 100px;
        }
        ul li {
      
            width: 120px;
            height: 35px;
            list-style: none;
            perspective: 500px;
        }
        .box {
      
            position: relative;
            width: 100%;
            height: 100%;
            transform-style: preserve-3d;
            transition: all 1s;
            
        }
        .box:hover {
      
            transform: rotateX(90deg);
        }
        .front,
        .back {
      
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
        }
        .front {
      
            background-color: pink;
            transform: translateZ(17.5px);
            z-index: 1;
        }
        .back {
      
            background-color: skyblue;
            transform: translateY(17.5px) rotateX(-90deg) ;
        }

    style>
head>
<body>
    <ul>
        <li>
            <div class="box">
                <div class="front">今天周六div>
                <div class="back">要不去吃烧烤div>
            div>
        li>
    ul>
body>

这个老师的视频更详细:https://www.bilibili.com/video/BV14J4114768?p=385

案例 图片旋转

就先贴个代码吧…详细的可以看视频(偷个懒):

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
    <style>
        body {
      
            perspective: 1000px;
        }
        section {
      
            position: relative;
            width: 300px;
            height: 200px;
            margin: 150px auto;
            transform-style: preserve-3d;
            animation: rotate 5s infinite linear;
            background: url(./media/pig.jpg) no-repeat;
        }
        section:hover {
      
            animation-play-state: paused;
        }
        @keyframes rotate {
      
            from {
      
                transform: rotateY(0);
            }
            to {
      
                transform: rotateY(360deg);
            }
        }
        section div {
      
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            background: url(./media/dog.jpg) no-repeat;
        }
        section div:nth-child(1) {
      
            transform: rotateY(0) translateZ(300px);
        }
        section div:nth-child(2) {
      
            transform:rotateY(60deg) translateZ(300px);
        }
        section div:nth-child(3) {
      
            transform:rotateY(120deg) translateZ(300px);
        }
        section div:nth-child(4) {
      
            transform:rotateY(180deg) translateZ(300px);
        }
        section div:nth-child(5) {
      
            transform:rotateY(240deg) translateZ(300px);
        }
        section div:nth-child(6) {
      
            transform:rotateY(300deg) translateZ(300px);
        }
    style>
head>
<body>
    <section>
        <div>div>
        <div>div>
        <div>div>
        <div>div>
        <div>div>
        <div>div>
    section>
body>

你可能感兴趣的:(Web,前端,css3,html,animation,3d)