Hiệu ứng css đẹp transform scale3d

10/02/2022 04:05 416

Hiệu ứng css đẹp transform scale3d, với hiệu ứng này giúp anh chị tạo các chuyển động đẹp mắt cho box

Dưới đây là code:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Hiệu ứng css transform scale3d</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <style>
  .fcwordpress-transform-scale3d-wrap {
    display: flex;
    flex-flow: row wrap;
    max-width: 1000px;
    margin: 0 auto;
}

.fcwordpress-transform-scale3d-item {
    flex-basis: 25%;
    max-width: 25%;
    padding: 15px;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

.fcwordpress-transform-scale3d-item img {
    box-shadow: 0px 0px 10px 0px rgb(0 0 0 / 50%);
    max-width: 100%;
}

.fcwordpress-transform-scale3d-box h3 {
    text-align: center;
    font-size: 17px;
    font-weight: 500;
    margin-top: 19px;
}

.fcwordpress-transform-scale3d-box {
    will-change: transform;
    transform: perspective(1000px) rotateX(
0deg
) rotateY(
0deg
) scale3d(1, 1, 1);
}

.fcwordpress-transform-scale3d-box:hover {
    will-change: transform;
    transform: perspective(1000px) rotateX( 
17deg
 ) rotateY( 
14deg
 ) scale3d(1, 1, 1);
    transition: all 300ms ease 0s;
}
  </style>
</head>
<body>
<div class="fcwordpress-transform-scale3d-wrap">
    <div class="fcwordpress-transform-scale3d-item">
        <div class="fcwordpress-transform-scale3d-box">
				
                    <img src="https://fcwordpress.net/wp-content/uploads/2021/04/4_OnlineCourse-VideoOverlay-22122020.jpg">
            
    <h3>Lorem Ipsum is simply dummy text of the printing</h3>

				</div>
    </div>
    <div class="fcwordpress-transform-scale3d-item">
        <div class="fcwordpress-transform-scale3d-box">
				
                    <img src="https://fcwordpress.net/wp-content/uploads/2021/04/4_OnlineCourse-VideoOverlay-22122020.jpg">
            
    <h3>Lorem Ipsum is simply dummy text of the printing</h3>

				</div>
    </div>
    <div class="fcwordpress-transform-scale3d-item">
        <div class="fcwordpress-transform-scale3d-box">
				
                    <img src="https://fcwordpress.net/wp-content/uploads/2021/04/4_OnlineCourse-VideoOverlay-22122020.jpg">
            
    <h3>Lorem Ipsum is simply dummy text of the printing</h3>

				</div>
    </div>
    <div class="fcwordpress-transform-scale3d-item">
        <div class="fcwordpress-transform-scale3d-box">
				
                    <img src="https://fcwordpress.net/wp-content/uploads/2021/04/4_OnlineCourse-VideoOverlay-22122020.jpg">
            
    <h3>Lorem Ipsum is simply dummy text of the printing</h3>

				</div>
    </div>
    <div class="fcwordpress-transform-scale3d-item">
        <div class="fcwordpress-transform-scale3d-box">
				
                    <img src="https://fcwordpress.net/wp-content/uploads/2021/04/4_OnlineCourse-VideoOverlay-22122020.jpg">
            
    <h3>Lorem Ipsum is simply dummy text of the printing</h3>

				</div>
    </div>
    <div class="fcwordpress-transform-scale3d-item">
        <div class="fcwordpress-transform-scale3d-box">
				
                    <img src="https://fcwordpress.net/wp-content/uploads/2021/04/4_OnlineCourse-VideoOverlay-22122020.jpg">
            
    <h3>Lorem Ipsum is simply dummy text of the printing</h3>

				</div>
    </div>
    <div class="fcwordpress-transform-scale3d-item">
        <div class="fcwordpress-transform-scale3d-box">
				
                    <img src="https://fcwordpress.net/wp-content/uploads/2021/04/4_OnlineCourse-VideoOverlay-22122020.jpg">
            
    <h3>Lorem Ipsum is simply dummy text of the printing</h3>

				</div>
    </div>
    <div class="fcwordpress-transform-scale3d-item">
        <div class="fcwordpress-transform-scale3d-box">
				
                    <img src="https://fcwordpress.net/wp-content/uploads/2021/04/4_OnlineCourse-VideoOverlay-22122020.jpg">
            
    <h3>Lorem Ipsum is simply dummy text of the printing</h3>

				</div>
    </div>
    
</div>
</body>
</html>

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

<!DOCTYPE html>

<head>

<title>Hiệu ứng css transform scale3d</title>

<style>

.fcwordpress-transform-scale3d-wrap {

display: flex;

flex-flow: row wrap;

max-width: 1000px;

margin: 0 auto;

}

.fcwordpress-transform-scale3d-item {

flex-basis: 25%;

max-width: 25%;

padding: 15px;

}

* {

box-sizing: border-box;

margin: 0;

padding: 0;

}

.fcwordpress-transform-scale3d-item img {

box-shadow: 0px 0px 10px 0px rgb(0 0 0 / 50%);

max-width: 100%;

}

.fcwordpress-transform-scale3d-box h3 {

text-align: center;

font-size: 17px;

font-weight: 500;

margin-top: 19px;

}

.fcwordpress-transform-scale3d-box {

will-change: transform;

transform: perspective(1000px) rotateX(

0deg

) rotateY(

0deg

) scale3d(1, 1, 1);

}

.fcwordpress-transform-scale3d-box:hover {

will-change: transform;

transform: perspective(1000px) rotateX(

17deg

) rotateY(

14deg

) scale3d(1, 1, 1);

transition: all 300ms ease 0s;

}

</style>

</head>

<body>