Rotation3DEffect having undesired effect on Text - swiftui

Question

How is this problem different from other animation questions: I have not seen any articles addressing reversed Text. Please see below:
Here is the code that causes this:
.rotation3DEffect(
.init(degrees: isTapped ? 180 : 0),
axis: (x: 0.0, y: 1.0, z: 0.0),
anchor: .center,
anchorZ: 20.0,
perspective: 1.0
)
Here is how I tried to resolve: :
Tried to replace 180º with 360º which of course made the card spin twice (undesired but rendered the text straight)
Tried to use .reversed() as a workaround
Played with all of the params of 3DEffect to no avail
Searched internet for solution, no answer to this specific problem
Edit Also if anyone knows why the text renders like that when going back to arabic view.. that would be great additional assistance.
Edit Adding example code, able to just copy and paste and go
Edit Another edit, forgot I tried to use .reversed() as a workaround
import SwiftUI
struct ContentView: View {
let grid = [GridItem(.fixed(100), spacing: 5, alignment: .center),
GridItem(.fixed(100), spacing: 5, alignment: .center),
GridItem(.fixed(100), spacing: 5, alignment: .center)]
var body: some View {
VStack {
LazyVGrid(columns: grid, content: {
ForEach(Example.example, id: \.name) { ex in
AnimatedView(data: ex)
}
})
}
}
}
struct ContentView_Previews: PreviewProvider {
static var previews: some View {
ContentView()
}
}
struct Example {
let name: String
let translation: String
static let example =
[Example(name: "First", translation: "Second"),
Example(name: "Third", translation: "Fourth"),
Example(name: "Fifth", translation: "Sixth"),
Example(name: "Seventh", translation: "Eigth"),
Example(name: "Ninth", translation: "Tenth"),
Example(name: "Eleventh", translation: "Twelth")
]
}
struct AnimatedView: View {
#State private var isTapped = false
let data: Example
var body: some View {
Button(action: {self.isTapped.toggle()}) {
Text(isTapped ? data.name : data.translation)
.padding()
.foregroundColor(.white)
.frame(width: 100)
.background(isTapped ? Color.blue : .black)
.cornerRadius(8)
}.rotation3DEffect(
.init(degrees: isTapped ? 180 : 0),
axis: (x: 0.0, y: 1.0, z: 0.0),
anchor: .center,
anchorZ: 0,
perspective: 0
)
.animation(.linear)
}
}

Answer 1

struct AnimatedView: View {
#State private var isTapped = false
let data: Example
var body: some View {
Button(action: {self.isTapped.toggle()}) {
Text(isTapped ? data.name : data.translation)
.padding()
.foregroundColor(.white)
.frame(width: 100)
.background(isTapped ? Color.blue : .black)
.cornerRadius(8)
.rotation3DEffect( //<- here
.init(degrees: isTapped ? 180 : 0),
axis: (x: 0.0, y: 1.0, z: 0.0),
anchor: .center,
anchorZ: 0,
perspective: 0
) }.rotation3DEffect(
.init(degrees: isTapped ? 180 : 0),
axis: (x: 0.0, y: 1.0, z: 0.0),
anchor: .center,
anchorZ: 0,
perspective: 0
)
.animation(.linear)
}
}