<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Animations CSS</title>
</head>

<body>
<p>Effets d'animation sur des blocs ou des images au passe de la souris grâce à la propriété :hover</p>
  
<h1>BOUTTON FAT</h1>
<div class="container">
	<div class="btn">
		Passe ici et je grossis !
	</div>
</div>

<h1>EFFET SUR IMAGE</h1>
<div class="container2">
	<img class="img" src="https://indaplace.org/wp-content/uploads/2023/09/concert-20.jpg"/>
</div>

<h1>TRIPLE EFFET</h1>
  <div class="container">
    <div class="btn2">
      Triple effet !!
    </div>
  </div>

<h1>COMBINER PLUSIEURS TRANSFORMATIONS</h1>
<div class="container">
    <div class="box">
        <span>Hello!</span>
    </div>
</div>	

<h1>EFFET 3D</h1>
/*3D*/
<div class="container">
    <img class="box3D" src="https://indaplace.org/wp-content/uploads/2023/09/concert-20.jpg"/>
</div>	

<h1>EFFET 3D MODIFICATION DU POINT D'ANCRAGE</h1>
<div class="container">
    <img class="box3D1" src="https://indaplace.org/wp-content/uploads/2023/09/concert-20.jpg"/>
</div>	

</body>
</html>
h1 {
  text-align:center;
  margin-top:100px;
}
/*BOUTON*/
.btn {
	background: #011c37;
	color: #15DEA5;
	font-size: 20px;
	cursor: pointer;
	padding: 5px 10px;
	border-radius: 10rem;
	width:25%;
	text-align:center;
	margin:auto;
	transition-property: transform;
	transition-duration: 400ms;
}
.btn:hover {
	transform:scale(1.15);
}
/*IMAGE*/
.img{
	display:block;
	margin:100px auto;
	width:50%;
	cursor: pointer;
	transition: transform 400ms;
}
.img:hover {
	transform:scale(1.05);
	opacity:0.5;
}
/*TRIPLE EFFET*/
.btn2 {
    background-color: rgba(1, 28, 55, 0);
    border: 4px solid #011c37;
    border-radius: 10rem;
	font-size: 20px;
	cursor: pointer;
	padding: 5px 10px;
	width:25%;
	text-align:center;
	margin:auto;
    transition: all 400ms;
}
.btn2:hover {
	transform: scale(1.15);
	background-color: rgba(1, 28, 55, 1);
	color:white;
}
/*COMBINER PLUSIEURS TRANSFORMATIONS*/
.box {
	width:300px;
	height:300px;
	background-color:pink;
	margin:auto;
	cursor: pointer;
	overflow: hidden;
    transform: scale(.1) rotate(-90deg);
    transition: transform 330ms ease-in-out;
}
span {
	transform: translateY(250%);
	transition: transform 280ms ease-out 50ms;
	display: block;
	text-align:center;
}
.box:hover {
	transform: scale(0.9) rotate(0deg);
	background-color: rgba(1, 28, 55, 1);
	color:white;
}
span:hover{
	transform: translateY(0);
}
/*3D*/
.box3D {
	display:block;
	width:500px;
	height:auto;
	background-color:pink;
	margin:auto;
	cursor: pointer;
	overflow: hidden;
    transition: transform 3000ms ease-in-out;
}
.box3D:hover {
	transform: perspective(200px) rotateY(-35deg);
	background-color: rgba(1, 28, 55, 1);
}
/*3D*/
.box3D1 {
	display:block;
	width:500px;
	height:auto;
	background-color:pink;
	margin:auto;
	cursor: pointer;
	overflow: hidden;
	transform-origin:100% 100%;
    transition: transform 3000ms ease-in-out;
}
.box3D1:hover {
	transform: perspective(200px) rotateY(35deg);
	background-color: rgba(1, 28, 55, 1);
}
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.