Front end case -- CSS3 3D deformation production exhibition area

This paper mainly introduces CSS3 3D deformation production display area, which is one of the cases that the author has done. The principle of implementation is to call transform to rotate, scale, move and tilt elements through mouse hover event. Because I haven't opened my own server, I will post my own online cases in the future.

design sketch

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS3 3D Deformation production exhibition area</title>
    <style>
        body {
            margin-top: 5em;
            text-align: center;
            color: #414142;
            background: rgb(246,241,232);
            /*Task 1. Multi background production*/
            background-image: radial-gradient( farthest-side ellipse at center,  rgba(246,241,232,.85) 39%,rgba(212,204,186,.5) 100%), url("http://fs0.139js.com/file/s_jpg_857b081bjw1du3kveu19sj.jpg");

            /*Task 2. Control the background image size*/
            background-size:cover;
        }

        h1, em, #information {
            display: block;
            font-size: 25px;
            font-weight: normal;
            margin: 2em auto;
        }

        a {
            color: #414142;
            font-style: normal;
            text-decoration: none;
            font-size: 20px;
        }

        a:hover {
            text-decoration: underline;
        }

        #container {
            margin: 0 auto;
            width: 1024px;
        }

        .wrapper {
            display: inline-block;
            width: 310px;
            height: 100px;
            vertical-align: top;
            margin: 1em 1.5em 2em 0;
            cursor: pointer;
            position: relative;
            font-family: Tahoma, Arial;
            -webkit-perspective: 4000px;
            -moz-perspective: 4000px;
            -ms-perspective: 4000px;
            -o-perspective: 4000px;
            perspective: 4000px;
        }

        .item {
            height: 100px;
            -webkit-transform-style: preserve-3d;
            -moz-transform-style: preserve-3d;
            -ms-transform-style: preserve-3d;
            -o-transform-style: preserve-3d;
            transform-style: preserve-3d;
            /*Task 3: add transition animation effect to each list item*/
            -webkit-transition: -webkit-transform .6s;
        }

        .item:hover {
            /*Task 4. Change the transform ation effect of each list item in suspended state*/
            -webkit-transform:translateZ(-50px) rotateX(90deg);

        }

        .item img {
            display: block;
            position: absolute;
            top: 0;
            /*Task 5. Set the fillet and shadow effect of the list item picture*/
            -webkit-border-radius:7px;
            -webkit-box-shadow:2px 3px 2px 1px #ccc;
            -webkit-transform: translateZ(50px);
            -moz-transform: translateZ(50px);
            -ms-transform: translateZ(50px);
            -o-transform: translateZ(50px);
            transform: translateZ(50px);
            -webkit-transition: all .6s;
            -moz-transition: all .6s;
            -ms-transition: all .6s;
            -o-transition: all .6s;
            transition: all .6s;
            width: 310px;
            height: 100px;
        }

        .item .information {
            display: block;
            position: absolute;
            top: 0;
            height: 80px;
            width: 290px;
            text-align: left;
            border-radius: 15px;
            padding: 10px;
            font-size: 12px;
            text-shadow: 1px 1px 1px rgba(255,255,255,0.5);
            box-shadow: none;
            background: rgb(236,241,244);
            /*Task 6: set the gradient effect for the underlying display text level*/
            background:linear-gradient(to bottom,#fff,#3ef);
            -webkit-transform: rotateX(-90deg) translateZ(50px);
            -moz-transform: rotateX(-90deg) translateZ(50px);
            -ms-transform: rotateX(-90deg) translateZ(50px);
            -o-transform: rotateX(-90deg) translateZ(50px);
            transform: rotateX(-90deg) translateZ(50px);
            -webkit-transition: all .6s;
            -moz-transition: all .6s;
            -ms-transition: all .6s;
            -o-transition: all .6s;
            transition: all .6s;
        }

        .information strong {
            display: block;
            margin: .2em 0 .5em 0;
            font-size: 20px;
            font-family: "Oleo Script";
        }
        .item:hover {
            /*Task 7. Remove the shadow effect of the picture when the list item is suspended*/
            -webkit-box-shadow:none;
            border-radius: 15px;
        }

        .item:hover .information {
            box-shadow: 0px 3px 8px rgba(0,0,0,0.3);
            border-radius: 3px;
        }
    </style>
</head>
<body>
<div id="container">
    <h1>CSS3 3D Deformation production exhibition area</h1>
    <div class="wrapper">
        <div class="item">
            <img src="http://img.mukewang.com/545b1e900001db6d04630253.png" />
                <span class="information">
                <strong>Macao</strong>Famous both at home and abroad, the magic stone Yijian, who used to be the general security consultant of American casinos, eventually returned to Macau for retirement, and entertained friends from all sides to celebrate their birthday.
                </span>
        </div>
    </div>

    <div class="wrapper">
        <div class="item">
            <img src="http://img.mukewang.com/545b1eb20001ed6a03360201.png" />
                <span class="information">
                <strong>correct evil doings and revert to good deeds</strong>The play tells the story of Jin Mingmin's lawyer who, after losing his memory, recalls his past actions and repents heartily, and confronts the law firm he once worked with to make up for his mistakes.
                </span>
        </div>
    </div>

    <div class="wrapper">
        <div class="item">
            <img src="http://img.mukewang.com/545b1eef0001c62903830217.png" />
                <span class="information">
                <strong>Bitter Blood </strong>This play is adapted from the novel of Xiujie Kaijing< Bitter Blood>. New Criminal Police‚ÄĘSawara Xiahui (Sato Jian) is assigned to the Ginza police
                </span>
        </div>
    </div>

    <div class="wrapper">
        <div class="item">
            <img src="http://img.mukewang.com/545b1f4e0001f90c02850210.png" />
                <span class="information">
                <strong>Guobao special attack 3</strong>Guobao special attack 3,As the name suggests, it is the second sequel,It has been filed with the State Administration of radio, film and television.The tentative plot is:Pineapple blowing snow accidentally crossed the ancient fruit world
                </span>
        </div>
    </div>
    <div class="wrapper">
        <div class="item">
            <img src="http://img.mukewang.com/545b1f5500017d5603190214.png" />
                <span class="information">
                <strong>Red eye</strong>1988 On July 16, a serious traffic accident occurred on the train from Seoul, killing more than 100 people.
                </span>
        </div>
    </div>
    <div class="wrapper">
        <div class="item">
            <img src="http://img.mukewang.com/545b1f620001874503500209.png" />
                <span class="information">
                <strong>The presence of bears</strong>An accident on a dark rainy night, a section of laughingstock full of miscarriage, will exchange two boxes with similar appearance but different contents.
                </span>
        </div>
    </div>
</div>
</body>
</html>

tips: in order to make the code more elegant and not affect other styles, when referencing this article, please organize the style into a local. css file and then reference it. In addition, H1, EM and a are similar to these three elements. The author does not have an independent class name. When referencing, it is easy to cause code conflicts. ~If you have any questions, please leave a message. This article refers to the relevant cases of mooc.com.

Tags: css3

Posted on Sun, 31 May 2020 07:31:05 -0700 by CyclopsCED