HTML/lec8.html at main · SHARDAKOSHTA/HTML · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
<!-- <html>
    <style>
        div{
            height:300px;
            width:400px;
            margin: 50px auto;
            background-color:palevioletred;
            border:2px solid black;
        transition: 3s;

        }
        div:hover{
            /* transform: translate(200px,300px); */
            /* transform: translateX(300px); */
            /* transform: translateY(300px); */
            /* transform: rotateX(360deg); */
            /* transform: rotatey(360deg); */
            transform: rotate(360deg);
            /* transform: scale(2.0); */
            /* transform: scalex(1.5); */
             /* transform: scaley(2.5); */
        }
    </style>
    <head>
        <body>
            <div></div>
        </body>
    </head>
</html> -->


html>
    <style>

        #parent{
            height:500px;
            width:400px;
            margin: 40px auto;
            background-color:palevioletred;
            border:2px solid black;
            transform-style: preserve-3d;
        transition: 3s;
        position: relative;
        box-shadow: rgba(36, 137, 231, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px;

        }
        #parent:hover{
            transform: rotatey(180deg);
        }
        #one{
            height:50%;
            width:100%;
            position: absolute;
            z-index: 3;
            backface-visibility: hidden;
        }
        img{
            height:500px;
            width:400px;
            z-index: 4;
        }
        #two{
            height:50%;
            width:100%;

            position: absolute;
            backface-visibility: hidden;
            transform: rotateY(180deg);

        }


    </style>
    <head>
        <body>
            <div id="parent">
               <div id="one">
                <img src=https://images.unsplash.com/photo-1768310512589-5925669f1784?q=80&w=387&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D/>
                </div>
            <div id="two">Lorem ipsum dolor sit amet consectetur adipisicing elit. Optio cupiditate animi temporibus labore illo quod! Reprehenderit qui at quam culpa non. Ea, dolorem! Corrupti non deleniti amet recusandae. Unde, natus?</div>
  </div>
   </div>
        </body>
    </head>
</html>