旋转轮播图和图片旋转变形

最新推荐文章于 2020-02-13 10:24:04 发布

小-茶

最新推荐文章于 2020-02-13 10:24:04 发布

阅读量485

点赞数 1

分类专栏： CSS 文章标签：旋转轮播图图片旋转变形 CSS

本文链接：https://blog.csdn.net/weixin_43719948/article/details/103191383

版权

CSS 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

旋转轮播图

没有学JS，但是CSS弄成的旋转轮播图也还可叭
还是没有GIF
在这里插入图片描述
用到了：
父盒子加透视perspective，
还有transform-style:preserve-3d;让父盒子里的子盒子以3D效果显示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>旋转轮播图</title>
    <style>
        body{
            perspective: 1000px;
        }
        section{
            width: 300px;
            height: 200px;
            margin:100px auto;
            background: url("images/img2.jpg") no-repeat;
            background-size: cover;
            position:relative;
            transform-style: preserve-3d;
            transition:all 20s linear;
        }
        section:hover{
            transform:rotateY(360deg);
        }
        section div{
            width:100%;
            height:100%;
            background:url(images/img1.jpg) no-repeat;
            background-size: cover;
            position:absolute;
            top:0;
            left:0;
        }
        section div:first-child{
            transform:rotateY(0deg) translateZ(400px);
        }
        section div:nth-child(2){
            transform:rotateY(60deg) translateZ(400px);
        }
        section div:nth-child(3){
            transform:rotateY(120deg) translateZ(400px);
        }
        section div:nth-child(4){
            transform:rotateY(180deg) translateZ(400px);
        }
        section div:nth-child(5){
            transform:rotateY(240deg) translateZ(400px);
        }
        section div:nth-child(6){
            transform:rotateY(300deg) translateZ(400px);
        }
    </style>
</head>
<body>
    <section>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </section>
</body>
</html>

这是轮播的图片都是一样的情况，六张不一样的话，在每个child里面放background就可以哇。
像这样子：（期中作业里的）
在这里插入图片描述

section div:first-child{
            transform:rotateY(0deg) translateZ(400px);
            background:url(images/mgouwu1.jpg) no-repeat;
        }
......

图片旋转变形

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图片旋转变形</title>
    <style>
        div{
            width: 350px;
            height: 240px;
            margin:300px auto;
            position: relative;
        }
        div img{
            width:100%;
            height:100%;
            position:absolute;
            top:0;
            left: 0;
            transition: all 0.5s;
            transform-origin: top left;
        }
        div:hover img:nth-child(1){
            transform: rotate(60deg);
        }
        div:hover img:nth-child(2){
            transform: rotate(120deg);
        }
        div:hover img:nth-child(3){
            transform: rotate(180deg);
        }
        div:hover img:nth-child(4){
            transform: rotate(240deg);
        }
        div:hover img:nth-child(5){
            transform: rotate(300deg);
        }
        div:hover img:nth-child(6){
            transform: rotate(360deg);
        }
    </style>
</head>
<body>
<div>
    <img src="images/img1.jpg" />
    <img src="images/img1.jpg" />
    <img src="images/img1.jpg" />
    <img src="images/img1.jpg" />
    <img src="images/img1.jpg" />
    <img src="images/img1.jpg" />
</div>
</body>
</html>

用到了：
子绝父相
transform-origin: top left;设置变形中心点的位置
在伪类中设置不同的旋转角度值

更喜欢做网页，完全是因为网页好看又好玩啊，做MFC一点也不开心o(╥﹏╥)o