汇总之--css3 transition，transform2d-3d

最新推荐文章于 2024-02-23 16:39:37 发布

董无敌啊

最新推荐文章于 2024-02-23 16:39:37 发布

阅读量500

点赞数

分类专栏：方法汇总文章标签： css3 tansform3d

本文链接：https://blog.csdn.net/github_37744981/article/details/68486161

版权

方法汇总专栏收录该内容

35 篇文章 0 订阅

订阅专栏

个人博客
如有错误请指正谢谢大家

transition

基本写法

            /* 过渡属性 可以指定 某一个 或者某一些 如果想要所有的都能够过渡 使用all即可 */
     transition-property: width,height; 
            /* 持续时间 */
        transition-duration: 2s;
            /* 延迟时间 */
        transition-delay: 1s,2s;
            /* 过渡的动画线型
                linear
                ease-in
                ease-out
                ...
                实际开发的时候 不会使用transition来制作 太长的动画效果 所以 使用默认的即可
                ease
             */
             transition-timing-function: ease;

需要注意的一点是，不要使用all，如果是指定就指定是height或者别的属性，可以优化性能

复合写法

 transition: width 1s 1s linear, 
         height 1s 2s ease,background-color 1s 3s;

transform2d

translateX() translateY()

transform: translate(10px, 20px) */
transform: translateX(20px) translateY(20px);

rotate()

transform: rotate(360deg);

scale()

/* 
scaleX
scaleY用法类似于 上面的移动
*/
transform: scale(.5, .5);

skew()

transform: skew(0,45deg );

tansform 3d

判断方向的方法：

        x轴:从左往右
        y轴:从上往下
        z轴:从里向外;

        旋转方向的判断 左手定则
        大拇指 指向 旋转的 那个轴的方向 
        剩余的四根手指 弯曲的方向 就是旋转的方向

        为了能够有 3d的 一个透视效果 需要为 旋转对象的 父元素 添加 透视属性

        透视属性
            设置的是 3d变换的元素 距离 浏览器的 距离

        沿着Z轴缩放 看不出效果

.container{
            border: 1px solid gray;
            overflow: hidden;

            /*  距离 浏览器 的距离  */
            perspective: 1000px;


        }

transform-style: preserve-3d
如果需要有3d的视觉，还需要添加transform-style: preserve-3d;
transform-origin: left center
这是控制transform变换的圆点

小技巧：

在3d中有时候需要看不到背面：

        /* 设置 反面看不到 */
            backface-visibility: hidden;

demo:3d小盒子效果

TYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        body{
            /* 希望 3d效果明显一点 可以设置的小一些 越大 越不明显 */
            perspective: 500px;
        }
        .box{
            width: 200px;
            height: 200px;
            margin: 100px auto;
            border: 1px solid gray;
            position: relative;
            transition: all 1s;

            /* 将 3d变换的 父元素 添加一个属性 即可看到 3d的变换效果 */
            transform-style: preserve-3d;
        }
        .box .item{
            width: 100%;
            height: 100%;
            font-size: 150px;
            text-align: center;
            line-height: 200px;
            font-weight: 900;
            position: absolute;
        }
        .item:nth-child(1){
            background: orange; 
            transform: rotateY(0deg) translateZ(100px);
        }
        .item:nth-child(2){
            background: red;
            transform: rotateY(180deg) translateZ(100px);   
        }
        .item:nth-child(3){
            background: blue;
            transform: rotateY(90deg) translateZ(100px);        
        }
        .item:nth-child(4){
            background: pink;
            transform: rotateY(-90deg) translateZ(100px);       
        }
        .item:nth-child(5){
            background: green;
            transform: rotateX(90deg) translateZ(100px);        
        }
        .item:nth-child(6){
            background: yellowgreen;
            transform: rotateX(-90deg) translateZ(100px);       
        }

        /* 设置过渡效果 */
        .box:hover{
            transform: rotateX(450deg) rotateY(450deg);
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="item">1</div>
        <div class="item">2</div>
        <div class="item">3</div>
        <div class="item">4</div>
        <div class="item">5</div>
        <div class="item">6</div>
    </div>
</body>
</html>

董无敌啊

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
汇总之--css3 transition，transform2d-3d

个人博客如有错误请指正谢谢大家transition基本写法 /* 过渡属性可以指定某一个或者某一些如果想要所有的都能够过渡使用all即可 */ transition-property: width,height; /* 持续时间 */ transition-duration: 2s;
复制链接

扫一扫