When I use rotation3DEffect to rorate a UI element with liquid glass, the liquid glass turns black and expands
struct TestCardView: View {
@State var rotation:CGFloat = 0.0
@State var vertical: Double = 0
@State var horizontal: Double = 0
var body: some View {
ZStack {
Image("paintImage")
.resizable()
.scaledToFill()
.ignoresSafeArea()
.blur(radius: 10)
// Card container
ZStack {
// Add content here
Image("paintImage")
.resizable()
.clipShape(RoundedRectangle(cornerRadius: 20))
.padding(10)
VStack {
Spacer()
Text("Placeholder text Placeholder text Placeholder text Placeholder text ")
.multilineTextAlignment(.center)
.padding(12)
.glassEffect(.clear, in: RoundedRectangle(cornerRadius: 12, style: .continuous))
.shadow(color: .black.opacity(0.2), radius: 8, x: 0, y: 4)
.padding(.bottom, 8)
}
.padding(25)
}
.frame(width: 360, height: 600)
.clipShape(RoundedRectangle(cornerRadius: 20))
.glassEffect(.clear, in: RoundedRectangle(cornerRadius: 20))
.rotation3DEffect(.degrees(vertical),axis: (x: 1, y: 0, z: 0))
.rotation3DEffect(.degrees(horizontal),axis: (x: 0, y: 1, z: 0))
.gesture(
DragGesture(minimumDistance: 0)
.onChanged { value in
withAnimation{
vertical = min(max(Double(value.translation.height / 10), -20), 20)
horizontal = min(max(Double(value.translation.width / 10), -15), 15)
}
}
.onEnded { _ in
withAnimation(.easeOut(duration: 0.5)) {
vertical = 0
horizontal = 0
}
}
)
}
}
}
