CSS-transform/rotate

最新推荐文章于 2024-07-11 10:41:40 发布

王子老师

最新推荐文章于 2024-07-11 10:41:40 发布

阅读量1.8k

点赞数

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

本文链接：https://blog.csdn.net/qq_37304462/article/details/121183371

版权

CSS 专栏收录该内容

37 篇文章 1 订阅

订阅专栏

念一场雪，念一段过往，四季轮回，沉淀安然，愿有衣暖身，有人暖心。

主要知识点：
1、transform-style: preserve-3d;立体效果开启
2、transition: all 1s;动画过渡
3、transform: rotateY(180deg);3d旋转
4、子绝父相
请添加图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>王子老师CSS进阶</title>
    <style>
        /*=================================3D透视属性开始================================*/
        /*透视要加在被观察元素的父盒子上*/
        /*body{*/
        /*    perspective: 100px;*/
        /*}*/
        /*div{*/
        /*    margin-left: 500px;*/
        /*    width: 200px;*/
        /*    height: 200px;*/
        /*    background-color: #1ba1e6;*/
        /*    border: 1px solid red;*/
        /*    transform: translateZ(0);*/
        /*}*/
        /*======================================3D透视属性结束===========================*/

        /*======================================3D旋转属性开始======================================*/
        /*div{*/
        /*    width: 200px;*/
        /*    height: 200px;*/
        /*    border: 1px solid blue;*/
        /*    perspective: 500px;*/
        /*}*/
        /*img{*/
        /*    display: block;*/
        /*    width: 200px;*/
        /*    height: 200px;*/
        /*    transition: all .6s;*/
        /*}*/
        /*img:hover{*/
        /*    !*transform: rotateX(360deg);*!*/
        /*    !*transform: rotateX(360deg);*!*/
        /*    !*transform: rotateX(45deg);*!*/
        /*    transform: rotate3d(1,1,0,45deg);*/
        /*}*/
        /*=================================3D旋转属性结束===============================*/

        /*==================================旋转动画开始=========================================*/
        /*body{*/
        /*    perspective: 500px;*/
        /*}*/
        /*.box{*/
        /*    position: relative;*/
        /*    width: 200px;*/
        /*    height:200px;*/
        /*    margin: 100px auto;*/
        /*    background-color: #cccccc;*/
        /*    transition: all 1s;*/
        /*!*    让子元素保持3D立体空间*!*/
        /*    transform-style: preserve-3d;*/
        /*}*/
        /*.box:hover{*/
        /*    transform:rotateY(80deg);*/
        /*}*/
        /*.box div{*/
        /*    left: 0;*/
        /*    top:0;*/
        /*    width: 100%;*/
        /*    height: 100%;*/
        /*    position: absolute;*/
        /*    background-color: #1ba1e6;*/
        /*}*/
        /*.box div:last-child{*/
        /*    background-color: #c81523;*/
        /*    transform: rotateX(90deg);*/
        /*}*/
    /*======================================旋转动画结束======================================*/
    /*======================================正反旋转案例开始======================================*/
        .box{
            position: relative;
            width: 300px;
            height: 300px;
            margin: 400px auto;
            border: 1px solid transparent;
            /*background-color: #cccccc;*/
            /*保持子元素开启3d立体效果*/
            transform-style: preserve-3d;
            /*添加动画过渡效果*/
            transition: all 1s;
        }
        .box:hover{
            transform: rotateY(180deg);
        }
        .box div{
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            line-height: 300px;
            text-align: center;
            font-size: 30px;
            border-radius: 50%;
        }
        .front{
            background-color: pink;
        }
        .back{
            /*先将后面的元素反转180°,再将父盒子直接翻转即可*/
            background-color: blueviolet;
            transform: rotateY(180deg);
        }
    /*======================================正反旋转案例结束======================================*/
    </style>
</head>
<body>
<!--    <div>透视练习</div>-->
<!--<div>-->
<!--======================================旋转练习开始======================================-->
<!--    <img src="../image/wz.jpg" alt="">-->
<!--</div>-->
<!--======================================旋转练习结束======================================-->
<!--======================================旋转动画开始======================================-->
<!--<div class="box">-->
<!--    <div></div>-->
<!--    <div></div>-->
<!--</div>-->
<!--======================================旋转动画结束======================================-->

<!--======================================正反旋转案例开始======================================-->
<div class="box">
    <div class="front">王子老师在这里等你</div>
    <div class="back">你来还是不来?</div>
</div>
<!--======================================正反旋转案例开始======================================-->

</body>
</html>