3d - Copy.css

\*
{
margin:0px;
padding:0px;
}
.container
{
	
	
	width:100%;
	height:300px;
	display:flex;
	justify-content: center;
	align-items: center;
	padding: 50px 0px;

	
}
.box
{
	
	position:relative;
	width:300px;
	height:300px;
	
	overflow:hidden;
	border-radius:50%;
	
	
	
	
}
.box img
{
	width:100%;
	height:100%;
	
	
}
.inside
{
	height:100%;
	width:100%;
	position:absolute;
	top:0;
	left:0;
	border-width:20px;
	border-style:solid;
	box-sizing:border-box;
	border-color:yellow black yellow black;
	border-radius:50%;
	transition: transform 1s;
	
	
}
.box:hover .inside
{
	transform:rotate(180deg);
	
}
.text{
	
	height:100%;
	width:100%;
	display:flex;
	justify-content:center;
	align-items:center;
	position:absolute;
	background:linear-gradient(#33A727,#7FCC61);
	font-size:30px;
	font-family:'oswald',sans-serif;
	font-weight:bold;
	text-transform:bold;
	top:0;
	left:0;
	color:white;
	opacity:0;
	transition: opacity 1s;
}
.box:hover .text{
	opacity:1;
}