ال Code الموجود في الدرس
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>CSS</title>
<link rel="stylesheet" href="css/master.css" />
</head>
<body>
<div class="container">
<div class="box">
<div class="face front">Front</div>
<div class="face back">Back</div>
</div>
</div>
</body>
</html>* {
box-sizing: border-box;
margin: 0;
}
.container {
margin: 40px auto;
width: 200px;
perspective: 600px;
}
.box {
position: relative;
width: 200px;
height: 200px;
transform-style: preserve-3d;
transition: transform 1s;
transform-origin: right center;
}
.box:hover {
transform: translateX(-100%) rotateY(-180deg);
}
.box .face {
position: absolute;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
font-weight: bold;
font-size: 30px;
color: white;
backface-visibility: hidden;
}
.box .front {
background-color: red;
}
.box .back {
background-color: green;
transform: rotateY(180deg);
}