Красивый поворот карточек вокруг своей оси

Поворот карточек 2D

HTML

<div class="container-002">
	<div class="container-002-content">
		<p class="container-002__maintext">НАШИ УСЛУГИ</p>
		<p class="container-002__text">
			В нашей компании работает сплоченный коллектив профессионалов с большим опытом работы. Все сотрудники компании являются квалифицированными специалистами в области строительства и имеют необходимую аттестацию.
		</p>

		<div class="container-002__items">

			<div class="folder">
			<div class="container-002__items-itm first">
				<div class="container-002__items-itm-image">
					<img class="container-002__items-itm-image-img" src="assets/images/icon001.png" alt="">
				</div>
				<div class="container-002__items-itm-text">
				<p class="container-002__items-itm-text-txt">Строительство<br>наружных<br>инженерных сетей</p>
				</div>
			</div>
			<div class="container-002__items-itm second">
				<div class="container-002__items-itm-text">
				<p class="container-002__items-itm-text-txt">Строительство<br>наружных<br>инженерных сетей</p>
				</div>
				<div class="container-002__items-itm-button">
				<a class="container-002__items-itm-button-lnk">Подробнее</a>
				</div>
			</div>
			</div>

			<div class="folder">
			<div class="container-002__items-itm first">
				<div class="container-002__items-itm-image">
					<img class="container-002__items-itm-image-img" src="assets/images/icon002.png" alt="">
				</div>
				<div class="container-002__items-itm-text">
				<p class="container-002__items-itm-text-txt">Благоустройство<br>территорий</p>
				</div>
			</div>
			<div class="container-002__items-itm second">
				<div class="container-002__items-itm-text">
				<p class="container-002__items-itm-text-txt">Благоустройство<br>территорий</p>
				</div>
				<div class="container-002__items-itm-button">
				<a class="container-002__items-itm-button-lnk">Подробнее</a>
				</div>
			</div>
			</div>

			<div class="folder">
			<div class="container-002__items-itm first">
				<div class="container-002__items-itm-image">
					<img class="container-002__items-itm-image-img" src="assets/images/icon003.png" alt="">
				</div>
				<div class="container-002__items-itm-text">
				<p class="container-002__items-itm-text-txt">Строительство<br>дорог</p>
				</div>
			</div>
			<div class="container-002__items-itm second">
				<div class="container-002__items-itm-text">
				<p class="container-002__items-itm-text-txt">Строительство<br>дорог</p>
				</div>
				<div class="container-002__items-itm-button">
				<a class="container-002__items-itm-button-lnk">Подробнее</a>
				</div>
			</div>
			</div>

			<div class="folder">
			<div class="container-002__items-itm first">
				<div class="container-002__items-itm-image">
					<img class="container-002__items-itm-image-img" src="assets/images/icon004.png" alt="">
				</div>
				<div class="container-002__items-itm-text">
				<p class="container-002__items-itm-text-txt">Земляные<br>работы</p>
				</div>
			</div>
			<div class="container-002__items-itm second">
				<div class="container-002__items-itm-text">
				<p class="container-002__items-itm-text-txt">Земляные<br>работы</p>
				</div>
				<div class="container-002__items-itm-button">
				<a class="container-002__items-itm-button-lnk">Подробнее</a>
				</div>
			</div>
			</div>

			<div class="folder">
			<div class="container-002__items-itm first">
				<div class="container-002__items-itm-image">
					<img class="container-002__items-itm-image-img" src="assets/images/icon005.png" alt="">
				</div>
				<div class="container-002__items-itm-text">
				<p class="container-002__items-itm-text-txt">Бетонные<br>работы</p>
				</div>
			</div>
			<div class="container-002__items-itm second">
				<div class="container-002__items-itm-text">
				<p class="container-002__items-itm-text-txt">Бетонные<br>работы</p>
				</div>
				<div class="container-002__items-itm-button">
				<a class="container-002__items-itm-button-lnk">Подробнее</a>
				</div>
			</div>
			</div>

			<div class="folder">
			<div class="container-002__items-itm first">
				<div class="container-002__items-itm-image">
					<img class="container-002__items-itm-image-img" src="assets/images/icon006.png" alt="">
				</div>
				<div class="container-002__items-itm-text">
				<p class="container-002__items-itm-text-txt">Аренда<br>спецтехники</p>
				</div>
			</div>
			<div class="container-002__items-itm second">
				<div class="container-002__items-itm-text">
				<p class="container-002__items-itm-text-txt">Аренда<br>спецтехники</p>
				</div>
				<div class="container-002__items-itm-button">
				<a class="container-002__items-itm-button-lnk">Подробнее</a>
				</div>
			</div>
			</div>

		</div>
	</div>
</div>

CSS

.container-002 {
    background-color: #ffffff;}
.container-002-content {
    background-color: #ffffff;
    width: 1200px;
    margin: auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 50px 10px 50px 10px;}
.container-002-content p.container-002__maintext {
    margin: 0;
    font-family: Alaskan;
    font-size: 25px;
    line-height: 1;
    font-weight: 700;
    color: #000000;
    text-align: center;}
.container-002-content p.container-002__text {
    width: 700px;
    margin: 40px 0 0 0;
    font-family: Alaskan;
    font-size: 18px;
    line-height: 1;
    color: #000000;
    text-align: center;}
.container-002__items {
    margin: 30px 0 0 0;
    width: 930px;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;}
.container-002__items-itm {
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
    width: 300px;
    height: 200px;
    padding: 10px;
    border: 2px solid #d1d1d1;}
.container-002__items-itm-image {
    width: 70px;
    margin: auto;
    border: 1px solid #007dc0;
    border-radius: 50%;
    padding: 10px;}
.container-002__items-itm-image img.container-002__items-itm-image-img {
    width: 100%;
    height: auto;}
.container-002__items-itm-text {
    margin: 20px 0 0 0;
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;}
.container-002__items-itm-text p.container-002__items-itm-text-txt {
    margin: 0;
    font-family: Alaskan;
    font-size: 22px;
    font-weight: 700;
    line-height: 1;
    color: #000000;
    text-align: center;}
.container-002__items-itm-button a.container-002__items-itm-button-lnk {
    text-decoration: none;
    margin: 0;
    font-family: Alaskan;
    font-size: 15px;
    font-weight: 700;
    line-height: 1;
    border: 2px solid #007dc0;
    background-color: #ffffff;
    color: #000000;
    padding: 10px 20px;
    transition: 0.5s;}
.container-002__items-itm-button a.container-002__items-itm-button-lnk:hover {
    background-color: #007dc0;
    color: #ffffff;
    transition: 0.5s;}

.first {
    position: relative;}
.second {
    position: absolute;
    top: 0;}
.folder .second {
    transform: rotateY(90deg);}
.folder .second,
.folder .first {
    transition: 0.5s;}
.folder:hover .second {
    transition-delay: 0.5s;
    transform: rotateY(0deg);}
.folder:hover .first {
    transform: rotateY(-90deg);}
.folder:not(:hover) .first {
    transition-delay: 0.5s;}
.folder {
    margin: 13px 0 0 0;
    position: relative;
    transition: 1s;}

 

Поворот карточек 3D

HTML

	<div class="container-002">
		<div class="container-002-content">
			<p class="container-002__maintext">НАШИ УСЛУГИ</p>
			<p class="container-002__text">
				В нашей компании работает сплоченный коллектив профессионалов с большим опытом работы. Все сотрудники компании являются квалифицированными специалистами в области строительства и имеют необходимую аттестацию.
			</p>

			<div class="container-002__items">
				
				<div class="scene">
					<div class="cards">
						<div class="container-002__items-itm card front">
							<div class="container-002__items-itm-image">
								<img class="container-002__items-itm-image-img" src="assets/images/icon001.png" alt="">
							</div>
							<div class="container-002__items-itm-text">
							<p class="container-002__items-itm-text-txt">Строительство<br>наружных<br>инженерных сетей</p>
							</div>
						</div>
						<div class="container-002__items-itm card back">
							<div class="container-002__items-itm-text">
							<p class="container-002__items-itm-text-txt">Строительство<br>наружных<br>инженерных сетей</p>
							</div>
							<div class="container-002__items-itm-button">
							<a class="container-002__items-itm-button-lnk">Подробнее</a>
							</div>
						</div>
					</div>
				</div>

				<div class="scene">
					<div class="cards">
						<div class="container-002__items-itm card front">
							<div class="container-002__items-itm-image">
								<img class="container-002__items-itm-image-img" src="assets/images/icon002.png" alt="">
							</div>
							<div class="container-002__items-itm-text">
							<p class="container-002__items-itm-text-txt">Благоустройство<br>территорий</p>
							</div>
						</div>
						<div class="container-002__items-itm card back">
							<div class="container-002__items-itm-text">
							<p class="container-002__items-itm-text-txt">Благоустройство<br>территорий</p>
							</div>
							<div class="container-002__items-itm-button">
							<a class="container-002__items-itm-button-lnk">Подробнее</a>
							</div>
						</div>
					</div>
				</div>

				<div class="scene">
					<div class="cards">
						<div class="container-002__items-itm card front">
							<div class="container-002__items-itm-image">
								<img class="container-002__items-itm-image-img" src="assets/images/icon003.png" alt="">
							</div>
							<div class="container-002__items-itm-text">
							<p class="container-002__items-itm-text-txt">Строительство<br>дорог</p>
							</div>
						</div>
						<div class="container-002__items-itm card back">
							<div class="container-002__items-itm-text">
							<p class="container-002__items-itm-text-txt">Строительство<br>дорог</p>
							</div>
							<div class="container-002__items-itm-button">
							<a class="container-002__items-itm-button-lnk">Подробнее</a>
							</div>
						</div>
					</div>
				</div>

				<div class="scene">
					<div class="cards">
						<div class="container-002__items-itm card front">
							<div class="container-002__items-itm-image">
								<img class="container-002__items-itm-image-img" src="assets/images/icon004.png" alt="">
							</div>
							<div class="container-002__items-itm-text">
							<p class="container-002__items-itm-text-txt">Земляные<br>работы</p>
							</div>
						</div>
						<div class="container-002__items-itm card back">
							<div class="container-002__items-itm-text">
							<p class="container-002__items-itm-text-txt">Земляные<br>работы</p>
							</div>
							<div class="container-002__items-itm-button">
							<a class="container-002__items-itm-button-lnk">Подробнее</a>
							</div>
						</div>
					</div>
				</div>

				<div class="scene">
					<div class="cards">
						<div class="container-002__items-itm card front">
							<div class="container-002__items-itm-image">
								<img class="container-002__items-itm-image-img" src="assets/images/icon005.png" alt="">
							</div>
							<div class="container-002__items-itm-text">
							<p class="container-002__items-itm-text-txt">Бетонные<br>работы</p>
							</div>
						</div>
						<div class="container-002__items-itm card back">
							<div class="container-002__items-itm-text">
							<p class="container-002__items-itm-text-txt">Бетонные<br>работы</p>
							</div>
							<div class="container-002__items-itm-button">
							<a class="container-002__items-itm-button-lnk">Подробнее</a>
							</div>
						</div>
					</div>
				</div>

				<div class="scene">
					<div class="cards">
						<div class="container-002__items-itm card front">
							<div class="container-002__items-itm-image">
								<img class="container-002__items-itm-image-img" src="assets/images/icon006.png" alt="">
							</div>
							<div class="container-002__items-itm-text">
							<p class="container-002__items-itm-text-txt">Аренда<br>спецтехники</p>
							</div>
						</div>
						<div class="container-002__items-itm card back">
							<div class="container-002__items-itm-text">
							<p class="container-002__items-itm-text-txt">Аренда<br>спецтехники</p>
							</div>
							<div class="container-002__items-itm-button">
							<a class="container-002__items-itm-button-lnk">Подробнее</a>
							</div>
						</div>
					</div>
				</div>

			</div>
		</div>
	</div>

CSS

.container-002 {
    background-color: #ffffff;}
.container-002-content {
    background-color: #ffffff;
    width: 1200px;
    margin: auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 50px 10px 50px 10px;}
.container-002-content p.container-002__maintext {
    margin: 0;
    font-family: Alaskan;
    font-size: 25px;
    line-height: 1;
    font-weight: 700;
    color: #000000;
    text-align: center;}
.container-002-content p.container-002__text {
    width: 700px;
    margin: 40px 0 0 0;
    font-family: Alaskan;
    font-size: 18px;
    line-height: 1;
    color: #000000;
    text-align: center;}
.container-002__items {
    margin: 30px 0 0 0;
    width: 930px;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;}
.container-002__items-itm {
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
    width: 300px;
    height: 200px;
    padding: 10px;
    border: 2px solid #d1d1d1;}
.container-002__items-itm-image {
    width: 70px;
    margin: auto;
    border: 1px solid #007dc0;
    border-radius: 50%;
    padding: 10px;}
.container-002__items-itm-image img.container-002__items-itm-image-img {
    width: 100%;
    height: auto;}
.container-002__items-itm-text {
    margin: 20px 0 0 0;
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;}
.container-002__items-itm-text p.container-002__items-itm-text-txt {
    margin: 0;
    font-family: Alaskan;
    font-size: 22px;
    font-weight: 700;
    line-height: 1;
    color: #000000;
    text-align: center;}
.container-002__items-itm-button a.container-002__items-itm-button-lnk {
    text-decoration: none;
    margin: 0;
    font-family: Alaskan;
    font-size: 15px;
    font-weight: 700;
    line-height: 1;
    border: 2px solid #007dc0;
    background-color: #ffffff;
    color: #000000;
    padding: 10px 20px;
    transition: 0.5s;}
.container-002__items-itm-button a.container-002__items-itm-button-lnk:hover {
    background-color: #007dc0;
    color: #ffffff;
    transition: 0.5s;}

.scene {
    margin: 13px 0 0 0;
    width: 300px;
    height: 200px;
    perspective: 3000px;}
.cards {
    width: 100%;
    height: 100%;
    position: relative;
    transform-style: preserve-3d;
    transition: transform 1.5s;}
.card {
    position: absolute;
    width: 100%;
    height: 100%;}
.front {
    background-color: #ffffff;
    z-index: 1;
    transition: 1.5s;}
.back {
    background-color: #ffffff;
    transform: rotateY(180deg);}
.cards:hover {
    transform: rotateY(180deg);}
.cards:hover .front {
    background-color: #ffffff;
    z-index: 0;
    transition: 1.5s;}

 

Так же с моим портфолио можно ознакомиться на любой из представленной социальной сети, на своих страницах я публикую посты о своих работах, заданиях и целях.

www.vk.com/udnlx www.ok.ru/udnlx

Для связи со мной можно воспользоваться любой социальной сетью,
или написать на почту:

Udnlx@yandex.ru

С моим резюме можно ознакомиться по ссылке:

https://penza.hh.ru

© 2020-2024 Портфолио Юдина Александра г.Пенза. Все права защищены