CSS3实现3D效果

最新推荐文章于 2024-05-15 11:32:05 发布

涛痕

最新推荐文章于 2024-05-15 11:32:05 发布

阅读量2.6k

点赞数 2

分类专栏： css 涛痕世界文章标签： css3 动画三维 3d 实例

本文链接：https://blog.csdn.net/iamcgt/article/details/72058711

版权

3D

1.属性

perspective ：透距离，单位像素（值越小，透视距离越近，效果越明显）：设置父元素上

perspective-origin: 设置透视点的位置

transform-style :指定某元素的子元素是位于三维空间内，取值：flat | preserve-3d

2.坐标

3.方位

这里写图片描述

4.实例

4.1翻转幻灯片

4.1.1效果

这里写图片描述

4.1.2思路

（1）给div设置4个img

<div id="box">
        <img src="images/banner1.jpg">
        <img src="images/banner2.jpg">
        <img src="images/banner3.jpg">
        <img src="images/banner4.jpg">
    </div>

（2）设置img为绝对布局

 #box img{
            position: absolute;
            top: 0;
            left: 0;
        }

（3）设置img的空间坐标，使其形成一个3D长方体

  img:nth-of-type(1) {
            transform: rotateX(0deg) translateZ(125px);

        }
        img:nth-of-type(2) {
            transform: rotateX(-90deg) translateZ(125px);

        }
        img:nth-of-type(3) {
            transform: rotateX(-180deg) translateZ(125px);

        }
        img:nth-of-type(4) {
            transform: rotateX(-270deg) translateZ(125px);

        }

（4）父元素给img提供三维空间

 transform-style: preserve-3d;

4.1.3源码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>翻转滚动幻灯片</title>
    <style>
        #box{
            margin: 100px auto;
            width:600px;
            height: 250px;
            position: relative;
            transition: transform 2s;
            transform-style: preserve-3d;
        }
        #box img{
            position: absolute;
            top: 0;
            left: 0;
        }
        img:nth-of-type(1) {
            transform: rotateX(0deg) translateZ(125px);

        }
        img:nth-of-type(2) {
            transform: rotateX(-90deg) translateZ(125px);

        }
        img:nth-of-type(3) {
            transform: rotateX(-180deg) translateZ(125px);

        }
        img:nth-of-type(4)

最低0.47元/天解锁文章

涛痕

关注

2
点赞
踩
8

收藏

觉得还不错? 一键收藏
0
评论
CSS3实现3D效果

CSS3动画效果3D1.属性perspective ：透距离，单位像素（值越小，透视距离越近，效果越明显）：设置父元素上perspective-origin: 设置透视点的位置transform-style :指定某元素的子元素是位于三维空间内，取值：flat | preserve-3d2.坐标3.方位4.实例4.1翻转幻灯片4.1.1效果4.1.2思路（1）给div设置4个img<div id="
复制链接

扫一扫