css3 3D旋转图片立方体特效代码

最新推荐文章于 2023-02-07 00:00:00 发布

哈曼泰

最新推荐文章于 2023-02-07 00:00:00 发布

阅读量582

点赞数

本文链接：https://blog.csdn.net/MSLwu/article/details/104577016

版权

1： css3-景深（3D空间！）

当我们观察物体的时候，由于视角的距离，所看到的物体，近大远小。
在这里插入图片描述
perspective: 1200px;（一般都是在父元素中使用）
transform:perspective(1200px) （在子元素中使用）
两个都设置会发生冲突，建议只设置父元素，通常的数值在900-1200之间
如果当你的视线距离物体足够远的时候，基本上就不会有近大远小的感觉

观察3D视觉角度： perspective-origin
perspective-origin：center center （中心）
perspective-origin：left top （左上角）
perspective-origin：100% 100% （右下角）

在这里插入图片描述

     .box{
width: 400px;height: 400px;background-color: blue;
margin: 100px auto;
transform-style: preserve-3d;
perspective: 300px;
        }
        h2{
            width: 100px;
            height: 200px;
          background-color: red;
          transition: 1s;  
        }
        .box:hover h2{
            transform: rotateZ(40deg);
        }
    </style>
</head>
<body>
    <div class="box">
        <h2></h2>
    </div>
</body>

2：实现3D场景

让父元素形成3D，让其子元素在3D空间进行变化：transform-style:preserve-3d
2D场景，在屏幕上水平和垂直的交叉线x轴和y轴
3D场景，在垂直于屏幕的方法，相对于3d多出个z轴
Z轴：靠近屏幕的方向是正向，远离屏幕的方向是反向
在这里插入图片描述

1): 变形属性：transform:

3D功能函数：
1>： 3D的位移：
transform:translate(x,y,z);
translateX()
translateY()
translateZ(Z轴不能是百分比)
2> : 3D的旋转：
transform:rotate();
rotateX()
rotateY()
rotateZ() //默认情况效果类似
rotate3D(x,y,z,a) [ 0不旋转。1旋转 ]

x：是一个0到１之间的数值，主要用来描述元素围绕X轴旋转的矢量值；
y：是一个０到１之间的数值，主要用来描述元素围绕Y轴旋转的矢量值；
z：是一个０到１之间的数值，主要用来描述元素围绕Z轴旋转的矢量值；
a：是一个角度值，主要用来指定元素在3D空间旋转的角度，如果其值为正值，元素顺时针旋转，反之元素逆时针旋转。

 .box{
width: 400px;height: 400px;background-color: blue;
margin: 100px auto;
transform-style: preserve-3d;
perspective: 300px;
transform: rotateY(50deg);
        }
        h2{
            width: 100px;
            height: 200px;
          background-color: red;
          transition: 1s;         
        }
        .box:hover h2{
            transform: rotateX(40deg);
        }
    </style>
</head>
<body>
    <div class="box">
        <h2></h2>
    </div>

3>: 3D缩放：

3D缩放：
        transform:scale3d(x,y,z);
            scaleX()
            scaleY()
            scaleZ()

正方体

在这里插入图片描述

    .box {
            width: 300px;
            height: 300px;
            position: fixed;
            transform-style: preserve-3d;
            margin: 0px auto;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
            transform: rotateX(20deg) rotateY(30deg);
            transition: 2s;
            margin: 100px auto;
        }
        .box div {
            width: 300px;
            height: 300px;
            position: absolute;
            left: 0;
            top: 0;
            border: 2px solid red;
            opacity: 0.5;
            backface-visibility: hidden;
            font-size: 100px;
            color: #ffffff;
            text-align: center;
            line-height: 300px;
            font-weight: bolder;
        }

        .c1 {
            transform: translateZ(150px);
            background: pink;
        }
        .c2 {
            transform: translateZ(-150px) rotateY(180deg);
           background: powderblue;
        }

        .c3 {
            transform: translateY(-150px) rotateX(90deg);
            background: red;
        }

        .c4 {
            transform: translateY(150px) rotateX(-90deg);
            background: royalblue;
        }
        .c5 {
            transform: translateX(-150px) rotateY(-90deg);
            background: sienna;
        }
       .c6 {
            transform: translateX(150px) rotateY(90deg);
            background: sienna;
        }
    </style>
</head>
<body>
    <div class="box">
        <img src="images/2.jpg" alt="">
        <div class="c1">1</div>
        <div class="c2">2</div>
        <div class="c3">3</div>
        <div class="c4">4</div>
        <div class="c5">5</div>
        <div class="c6">6</div>
    </div>
</body>

css3动画

制定关键帧：
@keyframes mymove{
from{初始状态属性}
to{结束状态属性}
}
或
@keyframes mymove{
0%{初始状态属性}
50%｛｝（中间再可以添加关键帧）
100%{结束状态属性}
}
animation: 复合属性
animation-name 关键帧的名称
animation-duration 动画的持续的时间
animation-timing-function 动画运用的类型（匀速linear、加速度、减速度、贝塞尔曲线）
animation-delay 动画的延迟
animation-iteration-count 动画运动的次数（默认情况下运动1次） infinite(无限循环)
animation-direction 运动的方向
属性值：
- reverse：反方向运行（让关键帧从后往前执行）
- alternate：动画先正常运行再反方向运行，并持续交替运行
- alternate-reverse：动画先反运行再正方向运行，并持续交替运行
animation-play-state
属性值：
paused暂停
running运动
常用的写法：
animation:关键帧的名称动画运动的时间 linear(匀速) 动画延迟的时间
1：transform-origin:center center -600px; /把Z轴的变形原点放在父元素上面/
2： animation-timing-function:
动画的类型：

linear：线性过渡。等同于贝塞尔曲线(0.0, 0.0, 1.0, 1.0)
ease：平滑过渡。等同于贝塞尔曲线(0.25, 0.1, 0.25, 1.0)
ease-in：由慢到快。等同于贝塞尔曲线(0.42, 0, 1.0, 1.0)
ease-out：由快到慢。等同于贝塞尔曲线(0, 0, 0.58, 1.0)
ease-in-out：由慢到快再到慢。等同于贝塞尔曲线(0.42, 0, 0.58, 1.0)
step-start:马上跳到动画每一结束桢的状态

在这里插入图片描述

 .box {
            width: 1000px;
            height: 600px;
            background-color: skyblue;
            position: relative;
            margin: 100px auto;
        }
        h3 {
            width: 100px;
            height: 100px;
            background-color: red;
            position: absolute;
            animation: h3 2s infinite;
        }
        .box:hover h3 {
            animation-play-state: paused;
        }
        @keyframes h3 {
            0% {
                left: 0;
                top: 0;
            }
            25% {
                left: 900px;
                top: 0;
            }
            50% {
                left: 900px;
                top: 500px;
            }
            75% {
                left: 0;
                top: 500px;
            }
            100% {
                left: 0;
                top: 0;
            }
        }
    </style>
</head>

<body>
    <div class="box">
        <h3></h3>
    </div>

在这里插入图片描述

animation vs transition
相同点：都是随着时间改变元素的属性值。
transition
过渡：
特点：需要事件进行触发。
animation
动画：
特点：不需要事件进行触发。调用关键帧即可

注意：图片在旋转后，使自身背面不可见
backface-visibility: hidden;

哈曼泰

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
css3 3D旋转图片立方体特效代码

1： css3-景深（3D空间！）当我们观察物体的时候，由于视角的距离，所看到的物体，近大远小。perspective: 1200px;（一般都是在父元素中使用）transform:perspective(1200px) （在子元素中使用）两个都设置会发生冲突，建议只设置父元素，通常的数值在900-1200之间如果当你的视线距离物体足够远的时候，基本上就不会有近大远小的感觉观察3D视...
复制链接

扫一扫